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这 是 一 本 以 现代 前 端 技术 思想 与 理论 为 主要 内 容 的 书 。 前 端 技术 发 
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合生 一 人 
用 本 
欢迎 阅读 本 书 ， 本 书 是 一 本 以 现代 前 端 技术 思想 与 理论 为 主要 内 容 





的 书 。 前 端 技术 发 展 迅速 ， 涉 及 的 技术 点 很 多 ， 我 们 往往 需要 阅读 很 多 
本 书籍 才能 理解 前 端 拉 术 的 知识 体系 。 这 本 书 在 前 病 知 识 体系 上 为 大 家 
做 了 很 好 的 总 结 和 梳理 ， 涵 盖 了 现代 前 痊 技 术 绝 大 部 分 的 知识 内 容 ， 包 
括 前 端 技 术 基础 、 开 发 调试 技术 、 前 器 相关 协议 、 三 层 结构 演进 与 实 
践 、 啊 应 式 网 站 、 页 面 区 互 框架 、 大 型 项 目 实践 经验 、 路 栈 开 发 实践 
等 ， 这 些 都 能 使 大 家 获得 成 为 高 级 前 端 工 程 师 或 架构 师 所 必须 具备 的 思 
维和 能 











目标 读者 





本 书 主要 面向 各 类 前 端 工 程 师 。 


初中 级 前 端 工 程 师 们 可 以 通过 本 书 快速 地 领略 到 前 端 领域 的 深度 和 
广度 ， 把 握 整 个 前 端 技术 领域 的 肥 展 方向 和 所 涵盖 的 绝 大 多 数 技术 要 
扩 ， 为 未 来 深入 学 习 前 并 知识 提供 指导 和 方 同 。 当 然 ， 笔 者 还 是 建议 你 
在 有 一 定 前 端 技术 基础 的 前 担 下 再 来 阅读 本 书 ， 因 为 这 并 不 是 一 本 入 门 
的 工具 类书 籍 ， 对 基础 知识 讲解 较 少 。 如 果 你 已 经 是 高 级 前 端 工程 师 ， 
也 希望 你 通过 本 书 了 解 到 自己 在 前 端 知识 体系 中 没有 掌握 的 内 容 。 笔 者 
欢迎 你 对 本 书 的 内 容 提 出 建议 ， 帮 助 我 指出 书 中 的 不 足 ， 补 充 书 中 没有 
涉及 的 内 容 。 





写作 目的 





本 书 的 写作 目的 是 希望 通过 笔者 对 现代 前 闪 知 识 体系 的 剖析 来 帮助 
那些 需要 快速 成 长 和 提升 的 前 端 读者 们 ， 为 他 们 提供 一 个 系统 的 知识 体 
系 和 明确 的 学 习 方 回 ， 快 速 了 解 现代 前 端 所 涉及 的 主要 知识 后 ， 把 握 前 
端 知识 体系 结构 的 整个 脉络 。 前 端 入 门 很 简单 ， 但 是 优秀 的 前 端 工程 师 
却 很 少 ， 如 果 你 希望 变 得 更 优秀 ， 那 你 一 定 会 需要 这 本 书 。 如 果 你 党 得 
目 己 已 经 很 优秀 ， 也 可 以 阅读 本 书 进一步 梳理 知识 体系 ， 帮 助 自己 但 缺 
补漏 。 








不 希望 你 购买 本 书后 因为 工作 忙 而 翻 几 页 便 将 它 一 直 放 在 某 个 角 
沙 ， 所 以 ， 本 书 会 用 尽量 少 的 篇 幅 和 浅显 的 语句 让 大 家 掌握 最 核心 的 技 
术 思 想 ， 少 数 偏 理 论 的 细节 不 会 展开 太 多 ， 只 将 其 中 最 关键 的 部 分 讲 清 
楚 。 如 果 大 家 希望 有 一 本 更 全 面 、 更 清晰 的 书籍 ， 笔 者 后 期 也 会 在 本 书 
的 基础 上 深入 展开 。 








总 之 ， 本 书 的 写作 目的 是 ， 希 望 区 别 于 基础 入 门 的 工具 书 而 从 实质 
上 帮助 所 有 的 前 端 读 者 们 快速 理解 前 端 技术 知识 体系 ， 培 养 自身 更 完善 
的 体系 化 思维 ， 掌 握 更 多 灵活 的 前 端 代码 架 构 技 术 。 最 后 ， 吏 心 希望 这 
本 书 能 真正 帮助 需要 知识 引导 的 同学 ， 起 到 一 个 学 习 启 蒙 的 作用 ， 也 希 
望 大 家 多 多 支持 这 本 书 。 














写作 背景 


随 着 互联 网 的 持续 发 展 和 网 络 信 息 的 多 样 化 ， 我 们 对 网 络 信息 的 获 
取 量 越 来 越 大 ， 获 取 方 式 越 来 越 多 ， 获 取 妊 介 种 类 也 越 来 越 复杂 。 残 目 
前 而 言 ， 我 们 生活 的 方方面面 部 与 互联 网 明明 相关 ， 通 信 、 娱 乐 、 购 





物 、 企 业 服务 等 均 已 成 为 每 天 生活 中 不 可 或 缺 的 部 分 。 就 获取 信息 的 媒 
介 来 看 ， 终 端 设备 〈 主 要 包括 个 人 电脑 、 智 能 手机 、 平 板 电脑 等 ) 是 我 
们 从 互联 网 上 获取 信息 的 最 主要 媒介 。 





与 此 同时 ， 互 联网 信息 展现 的 内 容 和 形式 越 来 越 俩 癌 于 终端 设备 屏 
幕 ， 而 且 基 于 终端 设备 的 交互 越 来 越 多 ， 越 来 越 复杂 。 目 前 在 终端 设备 
屏 划 上 ， 获 取 互 联网 信息 的 最 主要 途径 仍然 是 通过 Web 浏 览 露 〈 或 内 髓 
浏览 器 WebView， 下 文中 统称 为 Web 浏 览 器 ) ， 网 络 信息 在 Web 浏 览 器 
上 是 以 Web 应 用 的 形式 展现 的 。 随 者 信息 量 的 增 大 和 信息 多 样 化 增加 ， 
Web 浏 览 器 应 用 也 越 来 越 复杂 ， 规 模 越 来 越 大 大 ， 原 有 的 由 后 台 服 务 器 
直接 产生 网 页 数据 的 技术 已 经 不 能 满足 需要 。 











在 我 国 ， 随 着 2000 年 左右 第 一 批 互 联网 企业 的 崛起 ， 中 国 互 联网 累 
积 输出 的 网 络 信息 量 越 来 越 大 ， 用 户 数 越 来 越 多 ， 信 息 业 务 也 越 来 越 多 
样 化 。 国 内 许多 第 一 批 从 事 网 站 开发 的 技术 人 员 渐 渐 意 识 到 Web 浏 览 器 
问 业 务 信息 处 理 逻 辑 的 复杂 ， 因 此 他 们 不 能 把 主要 精力 只 集中 在 服务 雯 
问 的 数据 收集 和 处 理工 作 上 。 任 何 一 项 复杂 工作 简单 化 的 最 好 方式 必然 
是 分 工 ， 在 这 种 情况 下 ， 第 一 批 半 职业 的 前 端 工 程 师 出 现 了 ， 有 具体 时 间 
可 以 大 致 认 为 是 web ”2.0 时 代 开 始 的 时 候 ， 也 就 是 说 ， 国 内 的 前 端 工 程 
师 可 以 认为 是 在 以 用 户 原 创 产 生 内 容 (User Generated Content，UGC ) 
为 主 的 互联 网 应 用 网 站 产生 时 开始 出 现 的 。 不 仅 如 此 ， 在 UGC 应 用 大 行 
其 道 的 时 代 ， 各 类 电子 商务 网 站 的 蓬勃 发 展 又 大 大 增加 了 互联 网 企业 对 
前 端 工程 师 的 需求 。 














随 独 互联 网 的 普及 ， 社 交 和 电 丙 的 赣 海 中 涌现 出 了 无 数 的 互联 网 企 
业 ， 这 类 企业 中 的 大 部 分 目前 仍然 是 以 利用 Web 浏 览 吕 与 用 户 进 行 信息 
交互 为 主要 业务 ， 用 来 完成 用 户 的 信息 消费 。 目 2008 年 开始 ， 移 动 互联 
网 的 男 一 波浪 潮 让 互联 网 行业 的 发 展 如 日 中 天 ， 整 个 国内 外 互联 网 行业 











一 片 欣 欣 向 采 。 与 此 同时 ， 为 数 不 多 的 前 端 工程 师 和 呈 指 数 增长 的 前 站 
工程 师 需 求 量 形成 了 巳 大 的 产业 人 力 资源 矛盾 。 不 少 互联 网 公司 因为 业 
务 发 展 需要 ， 或 励 大 量 服务 闪 工 程 师 问 前 端 工 程 师 转 型 来 填补 前 端 人 力 
的 空缺 。 直 至 今天 ， 前 端 工 程 师 的 数量 仍然 远 远 不 能 满足 企业 的 发 展 需 
要 ， 不 过 与 UGC 时 代 相 比 ， 前 端 工 程 师 的 数量 有 了 一 定 的 提升 。 与 此 同 
时 ， 互 联网 应 用 场景 的 复杂 化 也 提高 了 企业 对 前 端 工 程 师 基 本 能 力 的 要 
求 ， 一 部 分 初级 前 端 工 程 师 仍然 不 能 胜任 企业 的 工作 ， 而 优秀 的 前 端 工 
程 师 一 将 难 求 。 





面 对 这 种 形势 ， 笔 者 觉得 ， 目 前 缺乏 优秀 前 端 工程 师 的 主要 因素 有 
以 下 两 点 。 





前 端 专业 教育 引导 资源 的 稀缺 





可 以 认为 ， 前 站 工程 师 培 养 起 来 难度 大 ， 和 前 端 教育 学 习 资源 的 缺 
乏 有 一 定 的 关系 。 虽 然 有 专门 的 前 端 方 癌 培训 机 构 ， 但 是 这 种 模式 下 的 
人 才 培 养 专 业 上 度 和 产 出 完全 不 如 人 意 。 笔 者 的 感觉 是 ， 一 般 毕 业 束 被 选 
拔 进 入 大 型 互联 网 公司 且 技 术 能 力 相 对 较 强 的 前 端 工 程 师 都 是 通过 平时 
人 
前 端 教育 资源 来 引导 ， 结 果 就 有 可 能 不 一 样 。 

















前 端 领域 的 拉 术 革新 速度 快 ， 对 前 端 工程 师 的 要 求 越 来 
越 


由 后 


前 端 技术 发 展 变化 远 快 于 其 他 
架 、 前 端 工具 、 多 终端 浏览 器 





真正 了 解 前 端 技术 的 工程 师 都 会 感 沉 
端 。 浏 览 右 特性 、 纺 程 语 言 标准 、 前 端 杠 





等 都 在 快速 地 换代 更 新 。 作 为 一 名 前 并 工程 师 ， 不 仅 要 掌握 现 有 的 技术 
来 实现 业务 需求 ， 解 决 业务 问题 ， 还 要 不 断 快速 学 习 新 的 技术 知识 ， 为 
新 拉 术 时 代 的 到 来 做 准备 。 对 于 后 接触 的 人 来 说 ， 需 要 了 解 掌握 的 东西 


所 以 希望 本 书 所 讲解 的 前 端 体系 化 内 容 能 够 降低 前 问 从 业 人 员 的 学 
习 成 本 ， 帮 助 读 者 快速 从 宏观 上 把 握 前 端 知识 体系 结构 的 整个 脉络 。 





本 书 一 共 分 7 草 ， 每 一 草 的 主要 内 容 如 下 所 述 。 








第 1 章 ， 主 要 介绍 现代 Web 应 用 的 发 展 概况 和 相关 的 技术 知识 ， 
同时 也 深入 总 结 目 前 主要 浏览 器 的 基础 原理 知识 与 常用 的 前 端 
开发 调试 技术 。 








第 2 章 ， 主 要 讲解 了 前 端 技术 的 相关 协议 ， 包 括 HTTP、 
HTTP2、HTTPS、Web 实 时 协议 、 前 端 安全 机 制 、RESTful 规 
范 和 Hybrid 混合 应 用 交互 协议 等 。 


第 3 章 ， 以 前 端的 三 层 结构 发 展演 进 和 实践 技术 为 主 ， 讲 解 
HTML5、ECMAScript 5+、CSS3 的 发 展 历程 和 特性 ， 同 时 介绍 
现代 前 端 开 发 中 的 编译 技术 和 响应 式 站 点 的 设计 思路 。 


第 4 章 ， 主 要 讲解 前 端 交 互 框架 的 演进 和 各 类 前 端 框架 的 实现 原 
理 ， 包 括 直 接 型 DOM 交 互 框架 、MVC、MVP、MVVM、 
Virtual DOM、MNV * 等 框架 的 设计 思路 。 





第 5 音 ， 以 专题 的 方式 讲解 现代 前 端 大 型 项 目的 实践 思路 ， 主 要 
包括 开发 规范 、 组 件 化 规范 、 构 建 原理 、 用 户 数据 分 机 、 前 站 
优化 手段 、 搜 索引 车 优化 基础 等 内 容 。 


第 6 半 ， 围 绕 跨 栈 主题 介绍 前 端 技术 栈 在 后 端 和 移动 端 Hybrid 上 
的 开发 实践 ， 例 如 ， 后 端 直 出 同 构 原理 、Hybrid 离 线 包 与 增 量 
机 制 实现 等 关键 染 构 的 设计 思路 。 





第 7 昔 ， 就 前 端的 未 来 趋势 进行 分 机 ， 简 单 介绍 物 联网 Web 化 、 
Web VR、 网 站 人 工 智能 等 未 来 的 前 端 技术 趋势 ， 总 结 成 为 一 
名 优秀 前 端 工程 师 的 要 了 又 。 





相信 读者 们 看 到 这 里 就 会 兴奋 起 来 ， 因 为 本 书 涵盖 了 现代 前 端 中 大 
部 分 需要 掌握 的 技术 实践 理念 ， 这 也 是 编写 本 书 的 初衷。 相 比 于 深入 介 
绍 具 体 茶 一 个 前 端 框 漆 的 书籍 ， 这 本 书 能 带 给 读者 体系 化 思维 和 技术 理 
念 上 的 提升 ， 因 为 前 并 学 习 不 是 学 会 某 个 框架 就 可 以 了 。 








关于 本 书 的 内 容 ， 在 此 声明 如 下 。 


1. 书 中 所 涉及 的 内 容 均 为 基于 笔者 理解 之 上 的 原著 输出 ， 部 分 内 
容 如 有 雷同 ， 属 于 共性 知识 。 


2. 书 中 提出 了 一 些 自 定义 概念 ， 可 能 之 前 没有 被 提出 ， 请 读者 认 
真理 解 。 


3. 书 中 涉及 技术 原理 类 的 内 容 较 多 ， 并 不 是 只 介绍 某 个 特定 框 染 


的 工具 类 书籍 ， 建 议 读者 在 有 一 定 前 并 技术 基础 的 前 提 下 阅读 ， 本 书 的 
编写 宗旨 是 提高 前 端 工 程 师 的 体系 思维 和 设计 能 力 ， 而 不 是 帮 大 家 快速 
入 门 。 














4. 本 书 使 用 的 全 部 样 例 代 码 均 基 于 ECMAScript 6 十 环境 ， 需 要 较 
高 版 本 的 浏览 器 或 Node 服 务 器 的 运行 支持 。 


5. 本 书 涉及 的 知识 点 量 大 ， 涵 盖 范 围 广 ， 对 相关 基础 知识 细节 的 
展开 不 会 过 于 详细 ， 但 对 于 每 种 技术 的 实现 都 有 较 深 入 的 原理 性 分 机 ， 
希望 读者 认真 阅读 领会 。 
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张 成 文 


读者 服务 


轻松 注册 成 为 博文 视点 社区 用 户 (www.broadview.com.cn) ， 您 即 
可 享受 以 下 服务 : 


。 提交 勘误 ”您 对 书 中 内 容 的 修改 意见 可 在 【提交 勘误 】 处 提 
交 ， 拓 被 采纳 ， 将 获 赠 博文 视点 社区 积分 〈 在 您 购买 电子 书 
时 ， 积 分 可 用 来 抵 扣 相应 金额 ) 。 


。 与 作者 交流 在 页 面 下 方 【读者 评论 】 处 留 下 您 的 疑问 或 观 
点 ， 与 作者 和 其 他 读者 一 同学 习 交 流 。 


页 面 入 口 : http://www.broadview.com.cn/31033 


二 维 码 : 





专家 推荐 


近 几 年 前 端 技术 发 展 迅猛 ， 各 大 公司 对 前 器 优秀 人 才 的 需求 急剧 增 
加 。 本 书 从 一 名 一 线 专 业 前 端 从 业者 的 角度 ， 面 面 俱 到 地 为 大 家 剖析 了 
当前 Web 前 端 所 需要 具备 的 各 种 现代 技术 。 无 论 是 从 网 络 、 浏 览 器 方 
面 ， 还 是 从 工程 化 、 团 队 协 作 的 角度 都 给 出 了 非常 好 的 呈现 ， 非 党 值得 
大 家 阅读 。 





郭 学 享 《Henry)〉 ， 腾 讯 前 端 IMWeb 团 队 负 责 人 


近 几 年 ， 有 关 前 并 的 书籍 很 少 能 全 面 而 且 深 入 地 介绍 前 端 技术 思想 
与 理论 相关 内 容 ， 大 部 分 都 是 独立 拆 分 介绍 前 端 单 点 领域 的 技术 栈 。 这 
本 书 以 现代 前 站 技术 思想 与 理论 为 主 ， 详 细 而 且 深 入 ， 但 又 通俗 地 回 读 
者 阐述 了 现代 前 器 扩 术 栈 ， 无 论 对 初学 者 还 是 中 级 学 者 都 是 值得 一 读 的 
好 书 。 读 者 可 以 通过 本 书 快速 领略 到 前 端 领域 的 深度 和 广度 ， 把 握 整 个 
前 端 技术 领域 所 涵盖 的 绝 大 多 数 知 识 拉 术 要 点 和 肥 展 方 回 ， 为 未 来 深入 
学 习 前 油 知识 提供 指导 和 方向 。 








大 漠 ，W3cplus.com 站 长 


现 如 今 ， 前 端 已 经 不 再 是 一 种 “新 兴 职 业 *， 对 技术 系统 且 全 面 的 退 
求 愈 显 重 要 ， 但 繁杂 的 技术 体系 及 各 种 劳 文 经 第 让 初学 者 无 所 适 从 。 本 
书 能 从 全 局 和 主流 的 视野 介绍 前 病 职 业 工 程 师 几 乎 涉猎 的 所 有 知识 ， 并 


将 前 端 工作 中 涉及 的 解决 方案 分 门 别 类 ， 抽 象 成 易于 理解 的 思路 。 相 信 
对 前 站 感 兴趣 的 读者 一 定 能 够 借助 这 本 难得 的 好 书 触 类 和 劳 通 ,一帆风顺 
地 推 开 通 往 前 器 界 的 神秘 大 门 ， 快 速 地 成 为 一 名 优秀 的 前 端 工 程 师 。 





许诺 〈Darksnow) ， 阿 里 巴巴 前 端 无 线 开 发 专家 


本 书 从 一 名 前 站 工程 师 的 角度 ， 杭 理 了 现代 前 端 技术 所 涉及 的 基础 
知识 体系 和 原理 性 技术 解析 ， 包 括 开 发 方式 的 变更 、 前 器 框 架 的 演进 、 
前 端 路 栈 技术 以 及 未 来 的 VR 等 ， 契 合 当前 流行 的 “大 前 端 ? 概 念 ， 非 党 
适合 读者 扩 宽 个 人 知识 面 。 男 外 ， 作 者 本 人 在 前 端 方面 有 很 深 的 造 讶 ， 
对 目前 的 一 些 前 并 问题 有 深入 的 研究 和 个 人 独特 的 见解 。 相 信 读 者 朋友 
们 一 定 能 从 本 书 中 收获 顾 多 。 





邓 海 龙 (Helon) ， 腾 讯 前 端 IMWeb 团 队 成 员 


前 端 技术 日 新 月 异 且 涉 及 的 知识 面 较 广泛 ， 对 于 初学 者 来 说 又 不 知 
从 何 学 起 、 所 学 的 东西 是 否 已 经 过 时 。 对 于 中 级 学 者 ， 可 能 又 存在 对 某 
些 知识 的 了 解 不 够 全 面 和 深刻 的 问题 。 本 书 由 前 端 技术 的 及 展 历程 向 整 
体 架 构 体 系 逐 层 展 开 ， 基 本 涵盖 了 现 阶段 的 前 端 技能 树 ， 为 前 端 学 习 者 
指明 了 方向 。 同 时 ， 本 书 注重 从 原理 的 层面 进行 知识 点 的 解析 ， 万 变 不 
离 其 军 ， 各 种 框架 或 技术 之 间 的 很 多 思想 是 相通 的 ， 把 握 住 这 一 点 ， 将 
对 读者 后 续 的 学 习 更 有 帮助 。 














李 双 双 (Lissa) ， 膳 讯 前端 工 程 师 
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第 1 革 Web 有 机 闹 技 术 基 础 


前 端 技 术 自 诞生 以 来 ， 就 一 直 保 持 着 较 快 的 发 展 速 度 。 与 此 同时 ， 
前 端 技术 的 快速 发 展 对 前 端 工 程 师 的 要 求 也 越 来 越 高 。 到 目前 为 止 ， 除 
了 浏览 器 的 应 用 复杂 度 在 提升 ， 前 端的 开发 模式 也 在 不 断 演进 。 前 端 开 
发 模式 先后 经 历 了 静态 黄页 时 期 、 服 务 器 组 装 动态 网 页 数据 时 期 、 后 端 
为 主 的 MVC (Model-View-Controller, 0 视图 、 逻 辑 分 离 
的 开发 模式 ) 模式 时 期 、 前 后 端 分 离 方 案 开发 时 期 、 纯 前 端 
MV* (Model-View- 炎 ， 数 据 模 型 、 控制 方式 分 离 的 开发 设计 方 
式 ， 这 里 的 控制 方式 有 多 种 实现 方法 ， 所 以 一 般 用 关 代 蔡 ) 为 主 与 中 间 
层 直 出 的 时 期 ， 最 后 进入 到 前 端 Virtual DOM (虚拟 DOM， 用 来 描述 页 
面 DOM 树 节点 之 间 关 系 的 一 种 特殊 JavaScript 对 象 ) 、MNV* (Model- 
NativeView-x ， 数 据 模型 、 原 生 视 图 、 控 制 方 式 分离 的 开发 设计 模式 ， 
这 里 的 控制 方式 也 可 以 有 多 种 实现 方法 ， 所 以 用 关 代 蔡 ) 模式 以 及 前 后 
问 同 构 的 开发 时 代 。 可 能 你 ee :不 熟悉 ， 不 过 不 用 担心 ， 在 后 
面 的 章节 中 将 会 详细 为 大 家 介 

















工 欲 善 其 事 ， 必 先 利 其 器 。 为 了 更 好 地 学 习 和 了 解 后 面 的 知识 ， 我 
们 有 必要 先 来 了 解 现 代 Web 前 端 技术 的 发 展 概况 和 Web 浏 览 右 的 基础 开 
发 技术 。 在 这 一 章 中 ， 我 们 就 先 来 了 解 一 下 Web 应 用 技术 基础 及 其 发 展 
概况 。 


1.1 现代 Web 前 端 技 术 发 展 概述 


1.1.1 现代 Web 前 端 技术 应 用 


互联 网 信息 呈现 的 方式 越 来 越 偏 癌 于 终端 设备 屏 僧 ， 而 且 终 并 设备 
屏 磊 上 的 交互 也 越 来 越 多 ， 越 来 越 复 杀 。 如 图 1-1 所 示 ， 如 今 我 们 获取 
网 络 信息 的 设备 种 类 越 来 越 多 ， 除 了 借助 传统 的 个 人 计算 机 来 访问 网 
络 ， 还 可 以 通过 乔 能 手机 、 平 板 电脑 或 穿戴 设备 等 来 获取 网 络 信息 。 


p= 


个 人 笔记 本 


’ 
1 
入 ~ 电脑 





BR 


服务 查询 终端 


企业 查询 计算 机 


图 1-1 现代 网 络 信息 主要 访问 媒介 





而 在 众多 不 同 终端 设备 屏幕 上 ， 获 取 互 联网 信息 的 最 主要 途径 仍然 
是 Web 浏览 器 〈 内 内 浏 览 器 WebView， 后 面 统 称 为 web 浏览 器 ) ， 网 络 
信息 内 容 在 Web 浏 览 器 上 最 终 是 以 Web 应 用 的 形式 展现 的 。 





如 今 ， 互 联网 Web 浏 览 右 上 的 应 用 已 经 变 得 十 分 庞杂 ， 接 下 来 我 们 
将 通过 一 个 有 具体 的 例子 来 了 解 现代 Web 浏 览 器 应 用 的 有 具体 发 展 是 怎么 样 
的 。 





图 1-2 是 目前 一 个 非常 典型 的 浏览 器 端 Web 应 用 一 一 腾讯 读 符 的 首 
页 部 分 用 户 界面 。 注 意 ， 这 只 是 一 部 分 ， 整 个 页 面 的 内 容 很 长 很 复杂 ， 
可 操作 的 部 分 也 很 多 ， 我 们 只 截取 了 头 部 导航 的 一 部 分 内 容 进 行 分 机 。 
从 用 户 界 面 上 来 看 ， 这 部 分 其 实 已 经 包含 了 很 多 的 数据 内 容 和 用 户 交 
互 ， 可 见 ， 不 同 于 十 年 前 网 页 器 的 应 用 ， 现 在 浏览 右上 的 应 用 实现 已 经 
非常 复杂 了 。 
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图 1-2 ”腾讯 课 和 桌面 浏览 器 端 首 页 部 分 用 户 界面 





在 这 个 页 面 中 ， 浏 览 器 发 起 的 直接 网 络 请 求 多 达 190 个 ， 图 片 请 求 
约 为 160 个 ， 在 带 有 大 量 高 清 图 片 下 载 的 条 件 下 ， 页 面 内 容 体积 大 小 大 
约 只 有 2.2MB， 平 均一 个 请 求 大 约 只 有 11.6KB， 通 过 用 户 操作 触发 的 间 
接 网 络 请 求 数 可 以 达到 上 千 个 ， 而 在 没有 使 用 浏览 器 缓存 的 情况 下 ， 从 
用 户 打开 页 面 网 址 请 求 到 浏览 器 页 面 显 示 内 容 却 只 用 了 480~520ms。 需 
要 做 到 这 些 是 一 件 很 不 容易 的 事情 ， 很 多 方面 都 需要 考虑 。 首 先 ， 网 页 
数据 内 容 多 的 情况 下 代码 怎么 实现 ? 请求 数目 大 时 怎么 做 到 快速 加 载 ? 
图 片 请 求 数 多 时 内 容 体积 怎样 做 到 尽 可 能 小 ? 网 页 体积 大 时 怎样 在 
500ms 内 展示 给 用 户 ? 用 户 操 作 种 类 繁杂 时 怎么 去 管理 实现 ..….... 然 而 ， 
我 们 要 明白 的 是 ， 这 个 用 户 首页 也 只 是 一 个 相对 比较 复杂 的 页 面 ， 还 有 
比 这 更 加 复杂 且 内 容 更 多 的 网 页 ， 那 我 们 又 该 怎样 来 解决 这 些 问题 呢 ? 














现代 前 端 Web 应 用 内 容 变 得 更 加 庞杂 ， 通 常 也 是 以 多 平台 的 形式 展 
现 。 仍 以 腾讯 课堂 的 应 用 为 例 ， 腾 讯 课堂 首页 在 移动 端 浏览 器 下 展示 的 
部 分 用 户 界面 如 图 1-3 所 示 。 在 移动 端 ， 用 户 打开 页 面 时 默认 加 载 的 内 
容 大 小 不 到 100KB， 页 面 内 容 全 部 加 载 完 成 时 总 请 求 数 约 为 50 个 ， 总 内 
容 大 小 约 为 200KB， 页 面 中 除 图 乒 外 主要 的 内 容 请 求 不 到 10 个 ， 在 无 组 
存 的 情况 下 页 面 内 容 平 均 加 载 时 间 约 为 1000ms。 和 桌面 端 浏览 器 〈 这 里 
主要 指 个 人 计算 机 上 面 安装 运行 的 浏览 器 ) 加 载 的 内 容 相 比 有 些 不 同 ， 
页 面 请 求 数量 和 体积 大 幅 减 小 ， 页 面 内 容 结构 也 显得 更 加 简单 ， 但 是 加 
载 时 间 却 更 长 了 ， 这 又 是 为 什么 呢 ? 











hd 可 





歌唱 中 气息 的 运用 PS 大 神 炼 成 记 ( 绪 下 一 
对 一 精品 课 ) 


图 1-3 ”腾讯 课 尝 移 动 浏览 器 端 首页 部 分 用 户 界面 











先 不 急于 回答 这 些 问题 ， 从 整体 上 来 看 ， 和 互联 网 应 用 初始 阶段 的 
静态 页 面相 比 ， 现 代 Web 浏 览 器 应 用 具有 一 些 明 显 的 特点 ， 例 如 页 面 内 
容 更 加 复杂 、 用 户 交 互 更 多 、 涉 及 的 平台 更 广 、 用 户 的 访问 实时 性 要 求 
更 高 等 。 上 面 的 案例 只 是 现代 Web 前 端 应 用 的 一 个 缩影 ， 也 是 一 个 非常 
典型 的 应 用 案例 。 要 解决 以 上 的 这 些 问题 ， 我 们 需要 先 了 解 一 些 必 要 的 
前 端 技术 知识 。 


1.1.2 现代 Web 前 端 技术 概述 


为 了 解决 上 一 市 中 的 问题 ， 我 们 从 以 下 几 个 方面 来 轧 考 。 


O 





页 面 内容 多 而 复杂 ， 怎 样 保证 开发 效率 ? 通常 ， 在 前 端 项 目 实 
践 中 ， 我 们 需要 借助 符合 特定 场景 的 前 端 框架 来 提高 开发 效 
率 ， 例 如 使 用 jQuery、MVVM 等 开发 框架 ， 对 常用 的 HTML 
DOM (Document Object Model， 文 档 对 象 模型 ， 是 指 HTML 内 
容 通过 浏览 器 解析 后 建立 的 具有 节点 父子 关系 的 树 形 对 象 ) 操 
作 进 行 高 效 封 装 ， 大 大 简化 开发 工作 量 ， 提 高 效率 。 








document .getElementById('text') ,innerHTML =' 这 是 一 段 文本 '，; 





在 jQuery 框 染 里 面 就 可 以 如 下 简洁 高 效 地 实现 。 


$('#text') .html(' 这 是 一 段 文本 '); 


O 


页 面 内 容 多 且 复 杂 ， 项 目的 管理 和 维护 该 如 何 去 做 ?前 端 项 目 
代码 越 来 越 多 ， 结 构 越 来 越 复 杂 ， 如 何 实现 项 目的 管理 将 直接 
决定 后 期 的 维护 成 本 。 所 以 我 们 必须 考虑 用 模块 化 和 组 件 化 的 
思路 来 管理 ， 所 谓 的 模块 化 和 组 件 化 是 指 采用 代码 管理 中 分 治 
的 思想 ， 将 复杂 的 代码 结构 拆 分 成 多 个 独立 、 简 单 、 解 耦合 的 
结构 或 文件 分 开 管 理 ， 使 项 目 结构 更 加 清晰 。 例 如 ， 某 新 闻 版 
块 组 件 的 内 容 可 以 用 下 面 的 HIML 结 构 来 表示 。 





<section clLass="uL-news"> 


<h2> 这 是 新 闻 标 题 </h2> 


上 入 各 


<article> 这 是 第 一 篇 新 闻 标 题 </article> 


</section> 


如 果 页 面 的 内 容 增多 ， 我 们 可 以 借助 Web Component (HTML5 的 一 
种 组 件 化 规范 ) 注册 一 个 <news> 的 标签 来 直接 引入 使 用 ， 然 后 再 使 用 
<news> 这 个 标签 来 代替 上 面 组 件 的 内 容 进 行 管理 维护 ， 页 面 中 其 他 的 标 
签 内 容 也 可 以 这 样 来 处 理 。 


<news></news> 


// 实 际 引 入 组 件 news .html 的 内 容 

<Section class="ui-news"> 
<h2> 这 是 新 闻 标 题 </h2> 
<article> 这 是 第 一 篇 新 闻 标 题 </article> 


</section> 


o 页 面 加 载 的 内 容 很 多 ， 怎 样 保 证 尽快 将 网 页 内 容 显示 给 用 户 ? 
在 页 面 内 容 较 多 、 较 复杂 的 情况 下 ， 为 了 让 用 户 尽 可 能 快速 看 
到 内 容 ， 我 们 可 以 通过 异步 的 方式 来 实现 ， 即 将 一 部 分 内 容 先 
展示 给 用 尸 ， 然 后 根据 用 户 的 操作 ， 腊 步 加 载 用 户 需 要 的 其 他 
内 容 ， 避 免 用 户 长 时 间 等 待 。 





o 怎样 限制 页 面 内 图 片 的 大 小 以 保证 页 面 快速 展示 ? 通 第 ， 网 页 
上 的 图 片 都 是 比较 大 的 ， 下 载 时 也 比较 消耗 流量 。 在 上 节 的 这 
个 用 户 首页 中 图 片 请 求 大 约 为 160 个 ， 那 么 我 们 怎样 保证 页 面 
下 载 时 消耗 的 流量 尽 可 能 小 呢 ? 这 可 能 就 需要 考虑 图 片 的 优化 
处 理 了 ， 如 使 用 更 高 压缩 比 webp 格 式 的 图 片 ， 在 图 片 质量 不 降 
低 的 情况 下 ， 可 以 大 幅度 减 小 图 片 的 网 络 流量 消耗 ， 提 高 图 片 
加 载 速度 。 

















<img src="/path/photo.webp"” alt=" 更 高 压缩 比 的 图 片 "> 


o 对 于 重复 打开 的 页 面 ， 能 否 让 浏览 器 不 再 向 服务 器 请 求 重复 的 


内 容 呢 ? 其 实 合理 地 利用 文件 缓存 就 能 做 到 这 一 点 ， 这 样 可 以 
大 幅度 提高 网 页 资源 的 加 载 速度 ， 而 且 蔷 运 的 是 ， 浏 览 右 默认 
可 以 文 持 文件 缓存 ， 对 于 一 段 时 间 内 浏览 器 的 重复 请 求 ， 服 务 
髓 可 能 会 返回 HTTP 的 304 状 态 码 或 者 不 发 送 请 求 ， 让 浏览 右 直 
接 从 本 地 读 取 内 容 。 











o 针对 上 一 市 中 关于 移动 并 提出 的 最 后 一 个 问题 ， 如 果 页 面 地 址 


在 移动 端 浏 览 器 打开 ， 双 该 怎么 处 理 呢 ?” 通 常 ， 我 们 认为 移动 
端 和 更 面 喘 浏览 器 相 比 ， 有 以 下 几 个 明显 劣势 : 移动 端 设备 计 
算 资 源 和 网 络 资源 比较 有 限 : 移动 端 设 备 CPU 处 理 速度 较 慢 且 
网 速 也 相对 较 低 ， 加 载 和 解析 同样 的 内 容 需要 更 长 的 时 间 :， 移 
动 端 浏览 器 受 屏 幕 大 小 限制 ， 一 次 能 展示 的 内 容 有 限 :， 移动 端 
设备 通常 没有 键盘 和 忌 标 等 外 部 设备 ， 用 户 交 互 的 难度 增 大 ; 
移动 问 浏 览 器 的 整体 性 能 不 如 果 面 端 浏 览 句 。 所 以 使 用 移动 端 
浏览 器 打开 一 个 Web 页 面 时 ， 我 们 常常 会 考虑 让 它 打 开 一 个 用 
户 界 面 和 内 容 更 加 简洁 的 页 面 。 例 如 ， 在 移动 端 上 访问 桌面 浏 
览 器 端 腾讯 课堂 首页 https : //ke.qq.com/index.html 将 会 自动 定位 
到 https:/m.ke.qq.comyindex.html 页 面 上 上。 尽管 这 样 可 以 让 移动 
问 浏 览 器 加 载 更 少 的 内 容 ， 但 所 需要 的 时 间 还 是 比较 长 ， 仍 需 
要 进行 更 多 的 优化 来 提升 加 载 速度 。 











过 思考 上 述 问 题 ， 我 们 可 以 大 大 优化 用 户 访问 页 面 时 的 体验 。 与 


此 同时 ， 也 涉及 了 前 端 开发 框架 、 模 块 化 和 组 件 化 开 友 、 资 源 异 步 加 


载 、 


啊 应 式 站 点 开发 、 绥 存 和 前 端 优 化 等 多 个 方面 的 技术 知识 。 


1.1.3 Web 前 端 技术 发 展 


除了 从 Web 应 用 的 角度 上 考虑 ， 我 们 也 可 以 从 前 端 工 程 师 的 角度 出 
发 ， 通 过 一 段 代 码 来 看 看 现代 前 端的 一 些 特点 。 作 为 一 个 前 端 工 程 师 ， 
目前 我 们 很 可 能 会 这 样 来 写 一 个 HTML 文件 。 


<1DOCTYPE html> 
<html lang="zh-cn" font-size="67.5px"> 
<head> 
<meta charset="utf-8"> 
<title> 页 面 标题 </title> 
<meta name="viewport" content="width=device-width,initial-sca 
1.0,user-scalable=no"> 


<meta name="format-detection" content="telephone=no"> 





<meta name="keywords" content=" 页 面 SEO 关键 字 " /> 








<meta name="description" content=" 页 面 的 描述 信息 "/> 

















<meta itemprop="name" content=" 页 面 标 题 "> 
<meta itemprop="image" content="/img/l10go-rich.png"/> 


<meta http-equiv="Cache-Control" content="max-age=7200" /> 


<link rel="dns-prefetch" href="//my.domain.com"/> 

<link href="//my.domain.com/main.css" rel="stylesheet"> 
</head> 
<body> 


<header id="hd"> 


<video src="./a.m3u8" width="300" height="220"></video> 


</header> 
<section id="bd"> 
<picture> 
<source media="(min-width: 375px)" src="med-res.jpg"> 
<source media="(min-width: 414px)" src="high-res.jpg" 
<img src="fallback.jpg" alt="picture"> 
</picture> 
</section> 
<footer id="ft"> 
<embed src="./rect.svg" width="300" height="100" type="im 
<canvas id="canvas"></canvas> 
</footer> 
<script data-main="main" src="mod.js"></script> 
</body> 
</html> 





或 许 你 还 不 理解 这 里 每 一 行 代 码 的 意思 ， 也 不 了 解 为 什么 要 这 么 
写 。 那 么 ， 我 们 先 来 看 一 个 之 前 写 的 页 面 。 


<1DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1i-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=u 


<title> 网 站 标题 </title> 





<meta name="keywords" content=" 页 面 SEO 关键 字 " /> 





<meta name="description" content=" 页 面 的 描述 "/> 

















<meta http-equiv="Cache-Control" content="max-age=7200" /> 
<link href="//my.domain.com/main.css" rel="stylesheet"> 
</head> 
<body> 
<div id="hd"> 
<embed src="player.swf" width="300" height="220"></embed> 
</div> 
<div id="bd"> 
<img src="fallback.jpg" alt="picture"> 
</div> 


<div id="ft"> 


</div> 

<script src="main.]js"></script> 
</body> 
</html> 


相 比 这 个 更 早 的 网 页 结构 ， 我 们 现在 写 的 HTML 结 构 有 些 地 方 变 简 
单 了 ， 但 是 更 多 的 地 方 变 复杂 了 。 在 现代 浏览 器 页 面 开 发 中 ， 我 们 通常 
会 使 用 HTML5 的 新 规范 ， 这 样 能 够 一 定 程度 上 简化 开发 过 程 ， 提 高 开 
发 效率 ， 也 有 利于 搜索 引擎 进行 检索 。 当 然 这 些 只 是 基本 结构 模板 的 举 
例 ， 在 现在 的 页 面 代码 中 ， 我 们 甚至 还 可 能 看 到 如 下 的 使 用 方法 。 


<link href="./x-image.html" rel="import"> 


<x-image width="300" height="200"></x-image> 





这 是 HTML5 中 组 件 化 Web Component 的 一 种 实现 方式 ， 它 通过 自 定 


义 标签 的 方式 来 封装 一 部 分 独立 的 结构 功能 代码 块 。 另 外 在 Angular2 框 
架 中 ， 前 端 页 面 组 件 也 可 以 定义 如 下 : 使 用 TypeScript 语 言 的 装饰 器 特 
性 来 摘 述 声明 一 个 前 端 页 面 组 件 。 


@Component({ selector: "my-app '， 
template: <hello-form></hello-form> ， 
directives: [helloFormComponent] 


}); 


不 仅 如 此 ， 除 了 浏览 器 上 的 开发 ，JavaScript 前 端 脚本 语言 在 
Node.js (Node.js 是 一 个 基于 Chrome V8 引 擎 的 JavaScript 运 行 环境 ， 使 用 
了 事件 驱动 、 非 阻塞 式 IO 的 模型 ， 使 其 轻 量 又 高 效 ， 它 使 用 的 包 管 理 
器 为 npm， 是 目前 全 球 最 大 的 开源 库 生 态 系统 ) 服务 器 端 也 可 以 进行 自 
由 高 效 的 开发 ， 例 如 结合 Koa (Koa 是 一 个 简洁 高 效 的 Node.js 端 Web 框 
架 ) Web 框 架 ， 我 们 束 可 以 非常 便捷 地 加 载 中 间 件 创建 一 个 Web 服 务 来 
运行 。 


"USe Strict ' ， 


const http = reduire( 'http ' ) ， 

const koa = require( ' koa ' ); 

const serve = require('koa-static'); 
const koaBody = require('koa-body'); 


const router = require('./routes'); 





// 创建 一 个 Koa 应 用 


const app = koa(); 


app.keys = [' site.com']' 


// 加 载 中 间 件 
app.use(serve('./pages')).use(serve('./static)); 
app.use(koaBody({ 
formidable: { 
uploadDir: dirname 
} 
})); 


app.use(router.routes( )); 





// 创建 服务 器 监听 
http.createServer(app.callback()).1listen(8000); 


console.1log('Server listening on port 8000 ' ) ; 


这 些 示例 代码 中 涉及 了 一 些 ECMAScript 6 十 标准 的 新 特性 ， 在 Web 
前 端 开发 实践 中 ， 这 些 新 的 特性 早已 经 深入 到 项 目 开 发 的 各 个 环节 当中 
了 ，ECMAScript 6 十 和 原来 的 语言 规范 相 比 更 加 简洁 、 高 效 。 我 们 知 
道 ， 前 端 技 术 栈 中 的 JavaScript 语 言 不 仅 能 在 浏览 器 端 解析 ， 也 能 在 
Node.js 服 务 器 上 运行 ， 而 且 目 前 已 经 被 广泛 使 用 在 各 类 企业 后 端 服 务 
中 。 但 是 这 里 要 说 的 是 ， 前 端 技术 上 的 这 些 变化 仅仅 发 生 在 四 年 之 间 ， 
而 且 这 里 列举 的 只 是 前 端 技术 变化 中 极 少 的 一 部 分 。 可 以 说 互联 网 和 移 
动 互 联网 的 诞生 与 井喷 式 的 发 展 促 进 了 前 端 技 术 的 发 展 ， 带 来 了 这 些 巨 
大 的 变化 。 我 们 不 能 确定 未 来 前 端 技 术 会 变 成 什么 样子 ， 但 可 以 肯定 的 
是 ， 从 现在 起 ， 四 年 后 又 将 是 完全 不 同 的 。 











我 们 必须 承认 ， 前 端 工 程 师 需要 做 的 事情 远 不 只 是 将 一 个 设计 稿 图 


片 在 页 面 上 实现 这 么 简单 ， 仅 从 Web 前 端 结构 的 开发 实现 模式 上 来 看 就 
己 经 发 生 了 翻天 禾 地 的 变化 。 


如 图 1-4 所 示 ， 前 端 结构 的 开发 实现 模式 先后 经 历 了 静态 黄页 时 
期 、 服 务 器 组 装 动态 网 页 数据 时 期 、 后 端 为 主 的 MVC 模 式 时 期 、 前 后 
问 分 离 时 期 、 纯 前 端 MV 关 为 主 和 中 间 层 直 出 时 期 、 前 端 Virtual DOM、 
MNV*、 前 后 端 同 构 时 期 。 
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图 1-4 前 端 应 用 开发 模式 演变 




















Web 前 端的 概念 随 着 互联 网 的 出 现 而 产生 ，Web 页 面 结构 从 最 早 的 
静态 黄页 形式 ， 浙 渐变 成 使 用 后 端 数 据 组 装 输 出 动态 页 面 的 形式 。 数 据 
复杂 后 ， 出 现 了 以 后 端 语言 为 核心 的 MVC 开 发 模式 。 为 了 方便 管理 更 
复杂 的 Web 项 目 ， 有 人 提出 了 前 后 端 分 离开 发 管理 的 方案 ， 让 前 端 工程 
师 能 够 专注 于 浏览 器 端的 交互 逻辑 实现 。 前 后 端 分 离 方式 出 现 后 ， 前 站 
快速 及 展 并 进入 了 以 纯 前 端 MV 光 框 染 为 主 的 时 代 ， 现 在 前 病 则 可 以 利 
用 更 加 灵活 且 与 组 件 化 结合 的 Virtual DOM 交 互 模式 来 实现 ， 或 者 选择 
前 后 端 同 构 、 器 终端 MNV* 的 开 友 模式 来 应 对 不 同 的 业务 场景 。 











由 此 说 明 ，Web 前 器 技 术 的 发 展 非常 迅速 而 且 已 经 发 生 了 巨大 的 变 
化 ， 但 通过 这 一 系列 的 变化 我 们 可 以 看 出 ， 前 端 从 无 到 有 且 发 展 到 现在 
的 不 变 宗旨 是 ， 一 直 持 续 在 以 效率 和 质量 为 最 终 导 向 的 道路 上 探索 前 
进 ， 并 且 未 来 关于 Web 技 术 效率 和 质量 这 两 方面 的 探索 仍 会 有 增 无 减 。 
效率 方面 ， 从 前 后 端 分 离 到 出 现 各 种 封装 的 前 端 框 杂 ， 都 在 解决 一 个 前 
端 编 程 开发 效率 的 问题 。 前 端 性 能 作为 前 端 质量 的 一 个 重要 部 分 一 直 倍 























受 关注 ， 而 现在 前 端 Virtual DOM 和 MNV* 交 互 模式 等 的 实现 思路 ， 就 
是 为 解决 前 端 交 互 性 能 问题 而 出 现 的 。 当 然 这 仅仅 是 在 前 端 开发 框架 上 
做 出 的 完善 和 改进 ， 此 外 相关 前 端 工程 、 自 动 化 构建 、 组 件 化 、 前 端 优 
化 等 技术 解决 方案 的 出 现 ， 也 为 现代 前 端 开发 的 效率 和 质量 提升 做 出 了 
重要 的 贡献 。 


1.2.1 浏览 需 组 成 结构 


在 介绍 浏览 占 组 成 结构 之 前 ， 我 们 先 来 看 一 个 以 前 经 第 被 问 到 的 问 
题 : 从 我 们 打开 浏览 右 输 入 一 个 网 址 到 页 面 展示 网 页 内 容 的 这 段 时 间 
内 ， 浏 览 器 和 服务 端 都 发 生 了 什么 事情 ? 我们 直接 来 看 一 个 相对 简洁 但 
比较 清晰 的 过 程 描述 





o 在 接收 到 用 户 输入 的 网 址 后 ， 浏 览 器 会 开启 一 个 线程 来 处 理 这 
个 请 求 ， 对 用 户 输入 的 URL 地 址 进行 分 析 判 断 ， 如 果 是 HTTP 
协议 就 按照 HTTP 方 式 来 处 理 。 


o 调用 浏览 器 引擎 中 的 对 应 方法 ， 比 如 WebView 中 的 loadU1rl 方 
法 ， 分 析 并 加 载 这 个 URL 地 址 。 


o 通过 DNS 解析 获取 该 网 站 地 址 对 应 的 耳 地 址 ， 查 询 完 成 后 连同 
浏览 器 的 Cookie、userAgent 等 信息 同 网 站 目的 IP 发 出 GET 请 


o 进行 HTTP 协 议会 话 ， 浏 览 器 客户 端 同 Web 服 务 右 发 送 报 文 。 


o 进入 网 站 后 台 上 的 Web 服 务 器 处 理 请 求 ， 如 Apache、Tomcat、 
Node.js 等 服务 器 。 


o 进入 部 署 好 的 后 端 应 用 ， 如 PHP、Java、JavaScript、Python 等 


后 端 程序 ， 找 到 对 应 的 请 求 处 理 逻辑 ， 这 期 间 可 能 会 读 取 服 务 
虱 绥 存 或 查询 数据 库 等 。 


o 服务 器 处 理 请 求 并 返回 啊 应 报 文 ， 此 时 如 果 浏 览 器 访问 过 该 页 
面 ， 缓 存 上 有 对 应 资源 ， 会 与 服务 器 最 后 修改 记录 对 比 ， 一 致 
则 返回 304， 和 否则 返回 200 和 对 应 的 内 容 。 





o 浏览 器 开始 下 载 HITML 文 要 〈 啊 应 报头 状态 码 为 200 时 ) 或 者 从 
本 地 缓存 读 取 文件 内 容 (浏览 器 缓存 有 效 或 啊 应 报头 状态 码 为 
304 时 ) 。 





o 浏览 器 根据 下 载 接收 到 的 HTML 文 件 解析 结构 建立 
DOM (Document Object Model， 文 档 对 象 模型 ) 文档 树 ， 并 
根据 HTML 中 的 标记 请 求 下 载 指 定 的 MIME 类 型 文件 (如 
CSS、JavaScript 脚 本 等 ) ， 同 时 设置 缓存 等 内 容 。 








o 页 面 开始 解析 渲染 DOM，CSS 根 据 规则 解析 并 结合 DOM 文 档 树 
进行 网 页 内 容 布 局 和 绘制 泻 染 ，JavaScript 根 据 DOM API 操 作 
DOM， 并 读 取 浏览 器 缓存 、 执 行事 件 绑 定 等 ， 页 面 整个 展示 


整个 过 程 中 使 用 到 了 较 多 的 浏览 喜 功 能 ， 如 用 户 地 址 栏 输入 框 、 网 
络 请 求 、 浏 览 器 文档 解析 、 洽 染 引 擎 、JavaScript 执 行 引 擎 、 客 户 端 存储 
等 。 下 面 ， 我 们 具体 来 看 一 下 浏览 占 的 主要 结构 。 


如 图 1-5 所 示 ， 通 常 我 们 认为 浏览 器 主要 由 七 部 分 组 成 : 用 户 界 
面 、 网 络 、JavaScript 引 擎 、 泻 染 引 擎 、UI 后 端 、JavaScript 解 释 堪 和 持 
久 化 数据 存储 。 用 户 界 面包 括 浏 览 器 中 可 见 的 地 址 输入 框 、 浏 览 器 前 进 
返回 按钮 、 打 开 书 签 、 打 开 历 史记 录 等 用 户 可 操作 的 功能 选项 。 浏 览 占 


引擎 可 以 在 用 户 界 面 和 泻 染 引擎 之 间 传 送 指 令 或 在 客户 问 本 地 绥 存 中 读 
写 数据 等 ， 是 浏览 器 中 各 个 部 分 之 间 相 互通 信 的 核心 。 浏 览 器 泻 染 引 苟 
的 功能 是 解析 DOM 文 档 和 CSS 规 则 并 将 内 容 排版 到 浏览 器 中 显示 有 样式 
的 界面 ， 也 有 人 称 之 为 排版 引擎 ， 我 们 第 说 的 浏览 器 内 核 主要 指 的 就 是 
演 染 引擎 。 网 络 功 能 模块 则 是 浏览 器 开 局 网 络 线程 发 送 请 求 或 下 载 资 源 
文件 的 模块 ， 例 如 DOM 树 解析 过 程 中 请 求 静 态 资源 首先 是 通过 浏览 器 
中 的 网 络 模块 发 起 的 ，UI 后 端 则 用 于 绘制 基本 的 浏览 器 窗口 内 控件 ， 比 
如 组 合 选择 框 、 按 钮 、 输 入 框 等 。JavaScript 解 释 器 则 是 浏览 器 解释 和 执 
行 JavaScript 脚 本 的 部 分 ， 例 如 V8 引 擎 。 浏 览 器 数据 持久 化 存储 则 涉及 
cookie、jlocalStorage 等 一 些 客户 端 存储 技术 ， 可 以 通过 浏览 器 引擎 提供 
的 API 进 行 调用 。 
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图 1-5 浏览 器 组 成 结构 





作为 前 端 开 发 者 ， 我 们 需要 重点 理解 泻 染 引擎 的 工作 原理 ， 灵 活 运 
用 数据 持久 化 存储 技术 ， 因 为 实际 的 开发 工作 中 这 部 分 的 操作 比较 多 ， 
而 其 他 几 个 部 分 都 是 由 浏览 器 决定 的 ， 开 发 者 能 控制 的 部 分 相对 较 少 。 
接 下 来 我 们 就 重点 讲解 这 两 个 部 分 。 





目前 ， 用 户 使 用 的 主流 浏览 器 内 核 有 4 类 : Trident 内 核 ， 例 如 
Internet Explorer、360 浏 览 嚣 、 搜 狗 浏览 器 等 ,Gecko 内 核 ，Netscape 
6 及 以 上 版 本 ， 还 有 Firefox、SeaMonkey 等 ; Presto 内 核 ， 主 要 是 Opera 
7 及 以 上 还 在 使 用 (Opera 内 核 原来 为 Presto， 现 使 用 的 是 Blink 内 
核 ) ; Webkit 内 核 ， 主 要 是 Safari、Chrome 浏 览 器 在 使 用 的 内 核 ， 也 
是 特性 上 表现 较 好 的 浏览 器 内 核 。 另 外 ，Blink 内 核 其 实 是 WebKit 的 
一 个 分 文 ， 添 加 了 一 些 优 化 新 特性 ， 例 如 路 进程 的 ifiame， 将 DOM 移 
入 JavaScript 中 来 提高 JavaScript 对 DOM 的 访问 速度 等 ， 目 前 较 多 的 移 
动 端 应 用 内 租 的 浏览 器 内 核 也 渐渐 开始 采用 Blink。 


演 染 引擎 的 主要 工作 流程 


泻 染 引 区 在 浏览 器 中 主要 用 于 解析 HTML 文 档 和 CSS 文 档 ， 然 后 将 
CSS 规 则 应 用 到 HTML 标 签 元 素 上 ， 并 将 HTML 泻 染 到 浏览 器 窗口 中 以 
显示 具体 的 DOM 内 容 。 如 图 1-6 所 示 ， 浏 览 器 通过 网 络 模 块 下 载 HTML 
文件 后 进行 页 面 解析 渲染 ， 流 程 主要 包括 以 下 几 个 步骤 : 解析 HTML 构 
建 DOM 树 、 构 建 演 染 树 、 演 染 树 布局 、 绘 制 泻 染 树 。 











解析 HTML 构 建 [一 >| 构建 演 染 机 
DOM 检 


图 1-6 ” 泻 染 引擎 工作 流程 








解析 HTML 构 建 DOM 树 时 泻 染 引擎 会 先 将 HTML 元 素 标 签 解析 成 由 
多 个 DOM 元 素 对 象 闻 点 组 成 的 且 上 共有 节点 父子 关系 的 DOM 树 结构 ， 然 
后 根据 DOM 树 结构 的 每 个 节点 顺序 提取 计算 使 用 的 CSS 规 则 并 重新 计算 
DOM 树 结构 的 样式 数据 ， 生 成 一 个 带 样 式 描 述 的 DOM 泻 染 树 对 象 。 
DOM 泻 染 树 生成 结束 后 ， 进 入 演 染 树 的 布局 阶段 ， 即 根据 每 个 泻 染 树 
节点 在 页 面 中 的 大 小 和 位 置 ， 将 节点 固定 到 页 面 的 对 应 位 置 上 ， 这 个 阶 
段 主 要 是 元 素 的 布局 属性 〈 例 如 position、float、margin 等 属性 ) 生效 ， 
即 在 浏览 器 中 绘制 页 面 上 元 素 节 点 的 位 置 。 接 下 来 束 是 绘制 阶段 ， 将 泻 
染 树 节 点 的 背景 、 颜 色 、 文 本 等 样式 信息 应 用 到 每 个 节点 上 ， 这 个 阶段 
主要 是 元 素 的 内 部 显示 样式 〈 例 如 color、background、text-shadow 等 属 
性 ) 生效 ， 最 终 完 成 整个 DOM 在 页 面 上 的 绘制 显示 。 














这 里 我 们 要 关注 的 是 泻 染 树 的 布局 阶段 和 绘制 阶段 。 页 面 生成 
后 ， 如 琳 页 面 元 素 位 置 发 生变 化 ， 丈 要 从 布局 阶段 开始 重新 泻 染 ， 也 
束 古 页 面 重 排 ， 所 以 页 面 重 排 一 定 会 进行 后 续 重 绘 ， 如 果 页 面 元 素 只 
是 显示 样式 改变 而 布局 不 变 ， 那 么 页 面 内 容 改 变 将 从 绘制 阶段 开始 ， 
也 称 为 页 面 重 绘 。 重 排 通常 会 导致 页 面 元 素 儿 何 大 小 位 置 发 生变 化 且 
伴随 着 重新 渲染 的 巨大 代价 ， 因 此 我 们 要 尽 可 能 避免 页 面 的 重 排 ， 并 
减少 页 面 元 系 的 重 绘 。 











泻 染 引擎 对 DOM 泻 染 树 的 解析 和 输出 是 逐 行 进行 的 ， 所 以 泻 染 树 
前 面 的 内 容 可 以 先 泻 染 展示 ， 这 样 就 保证 了 较 好 的 用 户 体 验 。 另 外 也 尽 
量 不 要 在 HTML 显示 内 容 中 插入 script 脚 本 等 标签 ，script 标 签 内 容 的 解 
释 执行 常 冲 会 阻塞 页 面 结 构 的 泻 染 。 





通常 情况 下 ， 不 同 浏览 器 内 核 的 解析 演 染 过 程 也 略 有 不 同 ， 我 们 以 
Chrome、Safari 浏 览 器 的 Webkit 内 核 和 Firefox 浏 览 器 的 Gecko 内 核 为 例 ， 
来 看 看 泻 染 引擎 工作 流程 的 这 四 个 步骤 具体 是 怎样 完成 的 。 








图 1-7 和 图 1-8 分 别 为 Webkit 内 核 和 Gecko 内 核 泻 染 DOM 的 主要 流 

程 。 可 以 看 出 ， 两 种 泻 染 引擎 工作 流程 的 主要 区 别 在 于 解析 HTML 或 
CSS 文 档 生 成 泻 染 树 的 过 程 : Webkit 内 核 中 的 HTML 和 CSS 解 析 可 以 认 
为 是 并 行 的 ;， 而 Gecko 则 是 先 解析 HTML， 生 成 内 容 Sink (Content Sink 
可 以 认为 是 构建 DOM 结 构 树 的 工厂 方法 ) 后 再 开始 解析 CSS。 这 两 种 演 
染 引 擎 工作 过 程 中 使 用 的 描述 术语 也 不 一 样 : Webkit 内 核 解析 后 的 泻 染 
对 象 被 称 为 泻 染 树 (Render Tree) ， 而 Gecko 内 核 解析 后 的 泻 染 对 象 则 
称 为 Frame 树 (Frame “Tree) 。 但 是 它们 主要 的 流程 是 相似 的 ， 都 经 过 
HTML DOM 解 析 、CSS 样 式 解 析 、 演 染 树 生成 和 演 染 树 绘 制 显示 阶段 。 
一 般 泻 染 引 擎 的 解析 过 程 中 都 包含 了 HTML 解 析 和 CSS 解 析 阶 段 ， 这 也 
是 泻 染 引擎 解析 流程 中 最 重要 的 两 个 部 分 ， 接 下 来 就 看 看 HTML 文 档 解 
析 和 CSS 规 则 解析 具体 是 怎样 进行 的 。 
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图 1-7 Webkit 内 核 泻 染 DOM 流 程 















































HTML 内 容 sink 内 容 模 型 
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图 1-8 Gecko 内 核 泻 染 DOM 流 程 
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HTML 文 档 解 析 


HTML 文 档 解析 过 程 是 将 HTML 文 本 字符 串 逐 行 解析 生成 具有 父子 
关系 的 DOM 节 点 树 对 象 的 过 程 ， 例 如 下 面 的 HTML 结 构 ， 通 过 解析 
HTML 文档 就 生成 了 如 图 1-9 所 示 的 由 多 个 不 同 DOM 元 素 对 象 组 成 的 
DOM 树 。 









HTMLHeadElement 
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图 1-9 ”DOM 结构 解析 示意 图 














HTMLElement 


HTMLElement 











<!IDOCTYPE html> 


<htm] lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title> 页 面 标题 </title> 

</head> 

<body> 
<header> 头 部 内 容 </header> 


<section> 





<div> 块 元 素 </div> 
<p> 上 段落 </p> 
</section> 
<footer> 底 部 </footer> 
</body> 
</html> 


演 染 引擎 在 HTML 解析 阶段 会 对 HTML 文本 的 标签 进行 分 析 ， 同 时 
创建 DOM 对 象 ， 最 终生 成 图 1-9 所 示 的 DOM 对 象 树 。 需 要 注意 的 是 ， 
<header>、<nav>、<section>、<footer> 这 些 布局 类 标签 的 DOM 类 型 均 为 
HTMLElement， 此 外 HTML 中 不 同 标签 的 每 个 元 系 对 应 的 原始 类 型 也 可 
以 是 不 一 样 的 。 








let element = document.getElementById('div'); 
let type = Object.prototype.toString.call(element).slice(8, -1); 


console.1log(type); // HTMLDivElement 








我 们 通过 这 一 段 代 码 就 可 以 获取 不 同 DOM 元 素 对 应 的 原始 类 型 
了 ， 和 HTML 标 准 一 样 ，DOM 元 系 的 原始 类 型 标准 也 是 由 W3C 组 织 指 
定 的 ， 具 体 更 多 第 用 的 类 型 可 以 参考 下 面 的 内 容 。 


o 根 元 系 


<html> (HTMLHtmlElement) 


o 文件 数据 元 素 


<head> (HTMLHeadElement) 
<title> (HTMLTitleElement) 
<base> (HTMLBaseElement) 
<link> (HTMLLiNnkElement) 
<meta> (HTMLMetaElement) 
<style> (HTMLStyleElement) 
<script> (HTMLScriptElement) 


<noscript> (HTMLElement) 


o 文件 区 域 元 素 


<body> (HTMLBodyElement) 

<section> (HTMLElement) 

<nav> (HTMLElement) 

<article> (HTMLElement) 

<aside> (HTMLElement) 

<h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement) 
<hgroup> (HTMLElement) 

<header> (HTMLElement) 

<footer> (HTMLElement) 


<address> (HTMLElement) 


o 和 群 组 元 素 


<p> (HTMLParagraphElement) 

<hr> (HTMLHRElement) 

<pre> (HTMLPreElement) 
<blockquote> (HTMLQUOteElement) 
<ol> (HTMLOListElement) 

<ul> (HTMLUListElement) 

<1i> (HTMLLIElement) 

<dl> (HTMLDListElement) 

<dt> (HTMLElement) 

<dd> (HTMLElement) 


<div> (HTMLDivElement) 


o 文字 层级 元 素 


<a> (HTMLANchorElement) 
<em> (HTMLElement) 
<strong> (HTMLElement) 
<small> (HTMLElement) 
<i> (HTMLElement) 

<b> (HTMLElement) 

<span> (HTMLSpanElement) 


<br> (HTMLBRElement) 





0 编 修 记录 元 素 


<ins> (HTMLModElement) 


<del> (HTMLModElement) 


o 内 贩 媒 体 元 素 


<img> (HTMLImageElement) 
<iframe> (HTMLIFrameElement) 
<embed> (HTMLEmbedElement) 
<object> (HTMLObjectElement) 
<param> (HTMLParamElement) 
<video> (HTMLVideoElement) 
<audio> (HTMLAUudioElement) 
<source> (HTMLSourceElement) 


<canvas> (HTMLCanvasElement) 


o 表格 元 系 


<table> (HTMLTableElement) 
<caption> (HTMLTableCaptionElement) 
<tbody> (HTMLTableSectionElement) 
<thead> (HTMLTableSectionElement) 
<tfoot> (HTMLTableSectionElement) 
<tr> (HTMLTableRowElement) 

<td> (HTMLTableDataCellElement) 


<th> (HTMLTableHeadercCellElement) 


o 窗 体 元 素 


<form> (HTMLFormElement) 
<fieldset> (HTMLFieldSetElement) 


<legend> (HTMLLegendElement) 


<label> (HTMLLabelElement) 
<input> (HTMLINputElement) 
<button> (HTMLButtonElement) 
<select> (HTMLSelectElement) 
<datalist> (HTMLDataListElement) 
<option> (HTMLOptionElement) 


<textarea> (HTMLTextAreaElement) 


o ”交互 式 元 素 


<details> (HTMLDetailsElement) 
<summary> (HTMLElement) 
<command> (HTMLCommandElement) 


<menu> (HTMLMenuElement) 





泻 染 引 敬 通 过 解析 HTML 文 本 形成 了 对 象 化 的 DOM 树 ， 但 要 将 
DOM 树 泻 染 到 浏览 器 窗口 中 形成 有 样式 的 内 容 ， 仍 需要 结合 CSS 规 则 生 
成 一 个 带 有 节点 CSS 样 式 描述 的 DOM 树 。 


DOM 元 素 标签 和 DOM 元 素 对 象 虽 然 都 是 用 来 描述 DOM 结 构 的 ， 
但 DOM 元 素 标签 是 指 文本 化 的 HTML 标 识 ， 而 DOM 元 素 对 象 则 是 指 
经 过 演 染 引擎 DOM 解 析 后 生成 的 具有 节点 父子 关系 的 树 形 对 象 。 


CSS 解 析 


CSS 解 析 和 HTML 解 析 类 似 ， 首 先 也 要 通过 词法 解析 生成 CSS 分 析 
树 ， 而 且 也 使 用 特定 的 CSS 文 本 语法 来 实现 ， 不 同 的 是 ，HTML 是 使 用 
类 似 XML 结 构 的 语法 解析 方式 来 完成 分 析 的 。 以 下 面 的 解析 CSS 代 码 为 
例 。 





html, bodyt{ 
margin: 0; 
color: red; 
} 
header, section, footer, div, pt{ 


margin-top: 10px; 


通过 分 析 CSS 文 档 ， 会 生成 如 图 1-10 所 示 的 CSS 规 则 树 状 图 ， 

CSSRule 会 保持 每 个 不 同 元 素 和 对 应 样式 的 映射 关系 。 在 泻 染 树 逐 行 生 
成 的 阶段 ，DOM 树 中 的 节点 会 在 CSS 分 析 树 中 根据 元 素 、 类 、id 选 择 器 
来 提取 与 之 对 应 元 素 的 一 条 或 多 条 CSSRule， 进 行 CSS 规 则 的 层 琶 和 权 
重 计算 ， 得 到 最 终生 效 的 样式 CSSRule 并 添加 到 DOM 泻 染 树 上 ， 当 每 个 
DOM 市 点 提取 CSS 样 式 完成 时 ， 用 于 页 面 布局 和 绘制 的 DOM 泻 染 树 便 
形成 了 。 在 一 个 已 经 形成 的 DOM 演 染 树 中 ， 节 点 的 CSS 规 则 可 通过 
document.defaultView.getComputedStyle (element, null) 方 法 来 获取 查看 。 
图 1-11 所 示 为 上 面 文档 中 <header> 元 素 标签 通过 浏览 器 泻 染 后 ， 最 终 计 
算得 到 的 margin 值 内 容 。 














margin: 0; 
color: red; 

} 

header, section, footer, div, p{ 
margin-top: 10px; 


} 





CSSStyleSheet 












CSSRule 


color:red 


CSSRule 


header、section、 
footer、 div、 p 







Selectors 


Declaration 


margin-top: 10px 

















html、 body margin: 3px 





图 1-10 ”CSS 结构 解析 示意 图 


JustifyContent: “normal” 

left: “auto” 

length: 258 

letterSpacing: "normal”" 
lightingColor: "rgb(255, 255, 255)" 
lineHeight: “normal”™ 
listStyle: "disc outside none” 
listStylelmage: "none” 
listStylePosition: "outside" 
listStyleTlype: "disc" 

margin: “1Gpx Opx @px" 
marginBottom: “Opx" 
marginLeft: "Bpx" 

marginRight: “@px" 

marginTop: "1@px" 





marker: ™™ 
markerEnd: "none" 
markerMid: “none” 


markerstart: “none” 
mask: "none” 
maskType: "luminance" 
maxHeight: “none” 
maxWidth: “none” 
maxZoom: "" 
minHeight: "8@px" 
minWidth: “Bpx” 


图 1-11 解析 完成 最 终 样 式 











一 个 节点 上 多 条 不 同 的 样式 规则 是 通过 权重 的 方式 来 计算 的 。 关 
于 CSS 规 则 的 权重 计算 ， 一 般 认 为 是 ! important> 内 联 样式 规则 〈 权 
重 1000) > id 选择 器 (权重 100〉 > 类 选择 器 〈 权 重 10) > 元 素 选 择 器 
《权重 1) 。 在 演 染 树 生 成 阶段 ， 当 多 个 CSSRule 对 应 到 同一 个 元 素 节 
点 中 时 ， 这 种 权重 计算 方式 的 作用 就 体现 出 来 了 ， 一 般 只 有 权重 最 高 
的 样式 规则 才 会 生效 。 








参考 资料 : 


http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/。 


1.2.3 浏览 右 数 据 持 久 化 存储 技术 


这 里 所 说 的 数据 持久 化 存储 主要 是 针对 浏览 器 的 ， wl 以 我 们 统称 为 
浏览 占 缓 存 (Browser Caching) ， 浏 览 占 绥 存 是 浏览 占 端 用 于 在 本 地 保 
存 数 据 并 进 Pi a 有 效 的 
ns 快速 地 啊 应 用 户 操作 ， 提 
高 页 面 内 容 的 加 载 速度 。 浏 览 器 端 缓存 的 实现 机 制 种 类 较 多 ， 一 般 可 以 
分 为 九 种 ， 如 图 1-12 所 示 。 打 开 Chrome 浏 览 器 的 调试 模式 ，Application 
左 侧 就 列举 了 现代 浏览 器 的 8 种 缓存 机 制 : HITP 文 件 缓存 、 
LocalStorage、 SessionStorage、indexDB、Web SQL、 Cookie、 
CacheStorage、 ee Cache， 男 外 还 有 一 种 使 用 不 太 多 的 Flash 绥 存 
方式 。 下 面 逐个 介绍 这 9 种 缓存 机 制 的 原理 和 使 用 场景 。 





[x 器] Elements Console Sources Network Timeline Profiles Application Security Audits 





> 
国 许 即 刁 




















图 1 12 浏览 器 缓存 管理 界面 














HTTP 文 件 缓存 


HTTP 文 件 缓存 是 基于 HTTP 协 议 的 浏览 器 端 文件 级 缓存 机 制 。 在 文 
件 重复 请 求 的 情况 下 ， 浏 览 器 可 以 根据 HITP 响 应 的 协议 头 信息 判断 是 
从 服务 器 端 请 求 文件 还 是 从 本 地 读 取 文件 ，Chrome 控 制 台 下 的 Frames 就 
可 以 查看 浏览 器 的 HTTP 文件 资源 缓存 列表 内 容 。 





图 1-13 是 浏览 右 HTTP 文 件 缓存 判断 机 制 的 流程 图 。 针 对 浏览 右 的 
重复 HTTP 请 求 ， 浏 览 器 和 服务 器 判断 是 否 使 用 浏览 器 端 文件 缓存 的 过 
程 如 下 。 


六 多 从 依 水 





| 
















= = 带 If-None-Match 
向 Web 服 务 器 请 求 
不 


判断 是 否 旦 __ | 带 If-Modified-Since 服务 器 决策 
从 缓存 读 取 oe 向 Web 服 务 器 请 求 人 


From Cache 









< 利 断 是 200 还 是 30 少 


向 Web 服 务 器 请 求 





304 无 更 新 
200 有 更 新 dd 


请 求 响应 从 缓存 读 取 








图 1-13 ” HTTP 文件 缓存 判断 机 制 流程 


.浏览 器 会 先 查 询 Cache-Control (这 里 用 Expires 判 断 也 是 可 以 
的 ， Wd 设置 的 是 绝对 过 期 时 间 ，Cache- oo 
对 过 期 时 间 〉 来 判断 内 容 是 否 过 期 ， 如 果 未 过 期 ， 则 直接 读 取 浏览 器 





绥 存 文件 ， 不 发 送 HITP 请 求 ， 否 则 进入 下 一 步 。 


2. 在 浏览 器 端 判断 上 次 文件 返回 头 中 是 否 含有 Etag 信 息 ， 有 则 连 
同 If-None-Match 一 起 向 服务 器 发 送 请 求 ， 服 务 端 判断 Etag 未 修改 则 返回 
状态 304， 修 改 则 返回 200， 否 则 进入 下 一 步 。 








3. 在 浏览 器 端 判断 上 次 文件 返回 头 中 是 否 含有 Last-Modified 信 
息 ， 有 则 连同 I-Modified-Since 一 起 向 服务 器 发 送 请 求 ， 服 务 端 判断 
Last-Modified 是 否 失效 ， 失 效 则 返回 200， 未 失效 则 返回 304。 





4. 如 采 Etag 和 Last-Modified 都 不 存在 ， 直 接 同 服务 器 请 求 内 容 。 


HTTP 绥 存 可 以 在 文件 缓存 生效 的 情况 下 让 浏览 器 从 本 地 读 取 文 
件 ， 不 仅 加 快 了 页 面 资源 加 载 ， 同 时 节省 网 络 流量 ， 所 以 在 web 站 点 配 
置 中 要 尽 可 能 利用 绥 存 来 优化 请 求 过 程 。 在 HIML 中 ， 我 们 可 以 添加 
<meta> 中 的 Expires 或 Cache-Control 来 设置 ， 需 要 注意 的 是 ， 一 般 这 里 
Cache-Control 设 置 max-age 的 时 间 单 位 是 秒 ， 如 有 果 同 时 设置 了 Expires 和 
Cache-Control， 则 只 有 Cache-Control 的 设置 生效 。 


<meta http-equiv="Expires" content="Mon，20 Jul 2016 23:00:00 GMT 


<meta http-equiv="Cache-Control" content="max-age=7200" /> 





当然 服务 端 也 需要 进行 对 应 设置 ，Node.js 服 务 器 可 以 使 用 中 间 件 来 
这 样 设 置 静态 资源 文件 的 绥 存 时 间 ， 例 如 我 们 可 以 结合 Koa Web 框 架 和 
koa-static 中 间 件 如 下 设置 实现 。 


const static= require('koa-static"'); 
const app = koal(); 


app.use(static ('./pages', { 


maxage: 7200 
})); 


localStorage 


localStorage 是 HTML5 的 一 种 本 地 缓存 方 案 ， 目 前 主要 用 于 浏览 
端 保存 体积 较 大 的 数据 (如 AJAX 返 回 结果 等 ) ， 需 要 了 解 的 是 ， 
localStorage 在 不 同 浏览 器 中 有 长 度 限 制 且 各 不 相同 。 





// localStorage 核心 API: 


localStorage.setIitem(key, value) // 设 置 localStorage 存储 记录 


localStorage.getItem(key) // 获 取 localStorage 存储 记录 
localStorage.removeItem(key) // 删 除 该 域名 下 单条 localStorage 
localStorage.clear() // 删 除 该 域名 下 所 有 localStorage 





如 表 1-1 所 示 ，localStorage 基 本 文 持 目前 的 主流 浏览 右 ， 在 Internet 
Explorer 8 以 上 最 大 限制 为 9MB， 在 Chrome 或 Safari 浏 览 器 里 面 的 大 小 限 
制约 为 2..6MB。 男 外 localStorage 常 用 的 API 也 较 少 ， 使 用 起 来 极其 方 
便 ， 核 心 方法 只 有 setItem()、getItem ()、removeltem()、clear()。 值 得 注 
意 的 是 ， 这 里 的 大 小 限制 指 的 是 单个 域名 下 localStorage 的 大 小 ， 所 以 
localStorage 中 不 适合 存放 过 多 的 数据 ， 如 果 数 据 存放 超过 最 大 限制 可 能 
会 读 取 报错 ， 因 此 在 使 用 之 后 最 好 移 除 不 再 使 用 的 数据 。 








表 1-1 ”localStorage 浏 览 器 支持 与 大 小 限 币 


Li 本 
Internet Explorer 8 以 上 
Firefox 8 以 上 5.24MB 





Ns 


Opera 2MB 
Chrome、 Safari 2.6MB 


此 外 ，localStorage 只 文 持 简 单数 据 类 型 的 读 取 ， 为 了 方便 
localStorage 读 取 对 象 等 格式 的 内 容 ， 通 常 需要 进行 一 层 安 全 封装 再 引入 
使 用 。 





let rkey = /^[0-9A-Za-z @-1*$/; 


let store; 


// 转换 对 象 
function init() { 
if (typeof store === 'undefined') { 
store = window['localStorage']; 


} 


return true; 





// 判断 localStorage 的 key 值 是 否 合法 





function isValidkKey(key) { 
if (typeof key !== 'string') { 
return false; 


} 
return rkey.test(key); 


exports = { 


// 设置 localStorage 单条 记录 


set (key, value) { 
let success = false; 
if (isValidKey(key) && init()) { 
try { 
Value += "''; 
store.setIitem(key, value); 
success = true; 
} catch (e) {} 
} 


return success,; 


}, 


// 读 取 localStorage 单条 记录 
get (key) { 
if (isValidKkey(key) && init()) { 
try { 
return store.getIitem(key); 
} catch (e) 人 
} 


return null; 


}, 


// 移 除 localStorage 单条 记录 
remove (key) { 
if (isValidKkey(Kkey) && init()) { 
try { 


store.removeIitem(key); 


return true; 
} catch (e) {} 
} 


return false; 


}, 


// 清除 localStorage 所 有 记录 
clear () { 





if (init()) 攻 
try { 
for (let key in store) { 
store.removeItem( key); 
} 
return true,; 
} catch (e) {} 
} 


return false; 
}; 
module.exports = exports; 
尽管 单个 域名 下 localStorage 的 大 小 是 有 限制 的 ， 但 是 可 以 
用 iframe 的 方式 使 用 多 个 域名 来 突破 单个 页 面 下 localStorage 存 储 数据 


的 最 大 限制 。 另 外 使 用 浏览 器 多 个 标签 页 打开 同 个 域名 页 面 
时 ，localStorage 内 容 一 般 是 共享 的 。 


sessionStorage 


sessionStorage 和 localStorage 的 功能 类 似 ， 但 是 sessionStorage 在 浏览 
器 关闭 时 会 自动 清空 。sessionStorage 的 API 和 1localStorage 完 全 相同 。 由 
于 不 能 进行 客户 端的 持久 化 数据 存储 ， 实 际 项 目 中 sessionStorage 的 使 用 
场景 相对 较 少 。 


Cookie 


Cookie (或 Cookies，， 指 网 站 为 了 辨别 用 户 身 份 或 Session 跟 踪 而 
储存 在 用 户 浏览 器 端的 数据 。Cookie 信 息 一 般 会 通过 HTTP 请 求 发 送 到 
服务 器 端 。 一 条 Cookie 记 录 主 要 由 键 、 值 、 域 、 过 期 时 间 和 大 小 组 成 ， 
一 般 用 于 保存 用 户 的 网 站 认证 信息 。 浏 览 器 中 Cookie 的 最 大 长 度 和 单个 
域名 支持 的 Cookie 个 数 由 浏览 器 的 不 同 来 决定 。 如 表 1-2 所 示 ， 在 
Internet Explorer 7 以 上 版 本 、Firefox 等 浏览 占 中 ， 支 持 的 Cookie 记 录 最 
多 是 50 条 ，Chrome、Safari 浏 览 占 上 则 没有 限制 ，Opera 浏 览 器 上 最 多 文 
持 30 条 ， 而 且 我 们 通常 认为 Cookie 的 最 大 长 度 限制 为 4KB (4095 字 节 到 
4097 字 节 ) 。 











表 1-2 ”Cookie 浏 览 器 支持 与 大 小 


| 器 | 二 抽 各 个 最 大 长 度 
Internet Explorer 7 以 上 sO 4095B 
Firefox 4097B 
Opera 30 个 4096B 
| | | | 


Chrome、Safari 无 限制 4097B 


和 localStorage 类 似 ， 不 同 域名 之 间 的 Cookie 信 息 也 是 独立 的 ， 如 果 
需要 设置 共享 ， 则 可 以 在 被 共享 域名 的 服务 器 端 设 置 Cookie 的 path 和 
domain 来 实现 ， 例 如 Koa Web 框架 下 就 可 以 用 如 下 方法 来 设置 cookie 在 
相同 父 域 的 多 个 子 域 中 共享 ， 其 他 的 Web 后 端 框 架 也 有 类 似 的 设置 方 


this.cookies.set('username', 'ouven', { 
domain: '.domain.com', 
path: '/' 

}); 


浏览 器 端 也 可 以 通过 document.cookie 来 获取 Cookie， 并 通过 

JavaScript 来 处 理解 析 。 但 是 需要 注意 的 是 ，Cookie 分 为 两 种 : Session 
Cookie 和 持久 型 Cookie.Session Cookie 一 般 不 设置 过 期 时 间 ， 表 示 该 
Cookie 的 生命 周期 为 浏览 器 会 话 期 间 ， 只 要 关闭 浏览 器 窗口 ，Cookie 就 
会 消失 ， 而 且 Session Cookie 一 般 不 保存 在 人 硬盘 上 而 是 保存 在 内 存 里 ， 持 
和 久 型 Cookie 一 般 会 设置 过 期 时 间 ， 而 且 浏 览 器 会 将 持久 型 Cookie 的 信息 
保存 到 硬盘 上 ， 关 闭 后 再 次 打开 浏览 器， 这 些 Cookie 依 然 有 效 ， 直 到 超 
过 设 定 的 过 期 时 间或 被 清空 才 失 效 。Cookie 设 置 中 有 个 HttpOnly 参 数 ， 
前 端 浏览 器 使 用 document.cookie 是 读 取 不 到 HttpOnly 类 型 Cookie 的 ， = 
设置 为 HttpOnly 的 Cookie 记 录 只 能 通过 HTTP 请 求 头 发 送 到 服务 器 端 

读 写 操作 ， 这 样 就 避免 了 服务 堪 端 0 
保证 了 服务 端 验证 Cookie 的 安全 性 。 











JavaScript 在 浏览 器 端 可 以 通过 document.cookie 来 读 取 非 HttpOnly 类 
型 的 Cookie 记 录 ，document.cookie 的 内 容 通 常 是 下 面 这 种 用 等 号 和 分 号 


分 割 的 键 值 对 形式 的 字符 串 。 


"Hm_JLvt_6225b4f9f1912feb003ddobe6d643a73=1472800594,1473130193; Hm 


eb003ddobe6d643a73=1473130201" 





在 前 端 浏览 器 中 ， 如 果 要 对 document.cookie 进 行 修 改 就 比较 麻烦 
了 ， 不 过 我 们 同样 可 以 进行 统一 的 封装 来 达到 方便 读 取 和 操作 Cookie 的 
目的 。 


exports = { 


// 获取 单条 cookie 记录 
get (n)t 
let m = document.cookie.match(new RegExp( "(^| )"+n+"=([ 人 ^ 


return Im ? "":decodeURIComponent(m[2]); 


}, 


// 设置 单条 cookie 记录 

set (name, value, domain, path, hour)t{ 
let expire = new Date( ); 
expire.setTime(expire.getTime() + (hour?3600000 * hour:30 
document.cookie = name + "=" + Value + "; " + "expires=" 


path="+ (path ? path :"/")+ "; " + (domain ? ("domain=" + domain 


}, 


// 删除 单条 cookie 记录 
del (name, domain, path) { 


document.cookie = name + "=; expires=Mon, 26 Jul 1997 05: 


path A a 
}, 


"+ (domain ? ("domain=" + domain + ";") 


H ee 


// 清除 document .cookie 


clear (){ 


let rs = document.cookie.match(new RegExp("([^ ;][^;]*)(? 
// 删除 所 有 cookie 


for (let i In rs)t{ 





document ,cookie = rs[i] + "=;expires=Mon, 26 Jul 1997 


}; 


module.exports = exports; 


存储 型 Cookie 是 存储 在 浏览 器 客户 并 计算 机 硬盘 上 的 。 以 
Windows 系 统 的 Chrome 浏 览 器 为 例 ， 浏 览 器 域名 的 Cookie 文 件 存储 在 
\ documents and settings\userName\cookie\ 文 件 夹 下 的 txt 文 本 文件 里 ， 
通 弟 文本 内 容 格 式 为 通过 一 定 规则 加 密 的 Cookie 内 容 ， 我 们 打开 文件 
就 可 以 直接 查看 。 


WebSQL 





WebSQL 是 浏览 器 端 用 于 存储 较 大 量 数 据 的 缓存 机 制 ， 不 过 这 只 有 


/AN 


较 新 版 本 的 Chrome 浏 览 右 文 持 该 机 制 ， 并 以 一 个 独立 浏览 器 端 数据 存 
储 规 范 的 形式 出 现 。WebSQL 主 要 有 以 下 几 个 特点 。 


1. WebSQL 数 据 库 API 实 际 上 不 是 HIML5 规 范 的 组 成 部 分 ， 目 前 
只 是 一 种 特定 的 浏览 器 特性 ， 而 且 WebSQL 在 HTML5 之 前 就 已 经 存在 ， 
是 单独 的 规范 。 


2. WebSQL 将 数据 以 数据 库 二 维 表 的 形式 存储 在 客户 端 ， 可 以 根 
据 需 要 使 用 JavaScript 去 读 取 。 


3. WebSQL 与 其 他 存储 方式 的 区 别 : localStorage 和 Cookie 以 键 值 对 
的 形式 存在 ，WebSQL 为 了 更 便于 检索 ， 人 允许 SQL 语 句 的 查询 。 





4. WebSQL 可 以 让 浏览 器 实现 小 型 数据 库存 储 功能 ， 而 且 使 用 的 
数据 库 是 集成 在 浏览 喜 里 面 的 。 


WebSQL API 主 要 包含 三 个 核心 方法 : openDatabase()、transaction() 
和 executeSql()。 例 如 在 mydatabase 数 据 库 中 创建 表 t1， 并 插入 两 条 记 
录 ， 实 现 如 下 。 








// openDatabase( ) 方 法 可 以 打开 已 经 存在 的 数据 库 ， 不 存在 则 创建 
let db = openDatabase('mydatabase', '1.0', 'test table', 2 * 1024 
let name = [2, 'ouven']; 
db.transaction(function (table) { 
table.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, msg 
table.executeSql('INSERT INTO t1 (id, msg) VALUES (1, "hello")' 
table.executeSql('INSERT INTO t1 (id, msg) VALUES (?, ?)', name 
}); 








transaction()， // transaction() 这 个 方法 允许 我 们 根据 情况 控制 执行 事务 提交 
executeSql();  // executeSql( ) 用 于 执行 真实 的 SQL 查询 语句 











openDatabase() 方 法 可 以 打开 已 存在 的 数据 库 ， 并 默认 创建 不 存在 
的 数据 库 。openDatabase() 中 的 五 个 参数 分 别 为 数据 库 名 、 版 本 号 、 挡 
述 、 数 据 库 大 小 、 创 建 回 调 ， 即 使 创建 回调 为 null 也 可 以 创建 数据 库 ， 
transaction() 方 法 允许 我 们 根据 情况 控制 执行 事务 提交 或 回 深 ， 
executeSql0 则 用 于 执行 真实 的 SQL 得 询 语句 。 








如 果 需 要 进行 读 操 作 ， 而 且 是 读 取 已 经 存在 的 记录 ， 我 们 也 可 以 使 
用 一 个 回调 函数 来 处 理 查 询 的 结果 ， 实 现 如 下 。 


let db = openDatabase('mydatabase', '2.0', 'test table', 2*1024); 
db.transaction(function (table) { 
table.executeSql('SELECT * FROM t1', [], function (table, res 
let len = results,.rows.1length, i; 
for (i = 0; i < len; i++){ 
console.1log(results.rows.item(i).msg); 
} 
}, Null); 
}); 


由 于 兼容 性 问题 ， 加 上 使 用 场景 比较 有 限 ， 目 前 WebSQL 的 应 用 并 


不 是 很 广泛 ， 但 是 作为 浏览 器 绥 存 技术 的 一 种 方式 ， 我 们 有 必要 了 解 它 
的 特点 和 实现 方法 。 





IndexDB 








IndexDB 也 是 一 个 可 在 客户 端 存 储 大 量 结构 化 数据 并 且 能 在 这 些 数 
据 上 使 用 索引 进行 高 性 能 检索 的 一 套 API。 由 于 WebSQL 不 是 HTML5 规 
范 ， 不 支持 Internet Explorer 10、Chrome 12 及 Firefox 5 以 上 版 本 的 浏览 
器 ， 所 以 一 般 推荐 使 用 IndexDB 来 进行 大 量 数据 的 存储 ， 其 基本 实现 和 
WebSQL 类 似 ， 只 是 使 用 的 API 规 范 不 一 样 ，WebSQL 使 用 类 似 
NoSQL (Not Only SQL， 非 关系 型 数据 库 ) 数据 库 的 设计 实现 ， 读 取 效 
率 更 高 。 浏 览 絮 对 IndexDB 的 大 小 限制 通常 约 为 50OMB， 这 样 束 可 以 将 
大 量 的 应 用 数据 保存 到 本 地 ， 在 本 地 满足 需要 搜索 的 场景 。 





if (database) { 
database.transaction(function(tx) { 


tx.executeSql("CREATE TABLE IF NOT EXISTS test (id REAL U 


}); 





和 WebSQL 类 似 ， 目 前 使 用 IndexDB 的 实际 应 用 场景 也 不 是 很 多 ， 
而 且 将 大 量 数据 保存 到 本 地 也 会 造成 数据 泄露 ， 所 以 我 们 了 解 即 可 ， 无 
须 在 实际 项 目 中 使 用 。 











Application Cache 





Application Cache 是 一 种 允许 浏览 器 通过 manifest 配 置 文件 在 本 地 有 
选择 性 地 存储 JavaScript、CSS、 图 斤 等 静态 资源 的 文件 级 绥 存 机 制 。 当 
页 面 不 是 首次 打开 时 ， 通 过 一 个 特定 的 manifest 文 件 配置 描述 来 选择 读 
取 本 地 Application Cache 里 面 的 文件 。 所 以 使 用 Application Cache 来 实现 
浏览 器 应 用 具有 以 下 三 个 优势 。 





1. 离线 浏览 。 通 过 manifest 配 置 描述 来 读 取 本 地 文件 ， 用 户 可 在 离 
线 时 浏览 完整 的 页 面 内 容 。 


2. 快速 加 载 。 由 于 缓存 资源 为 本 地 资源 ， 因 此 页 面 加 载 速 度 较 
快 。 


3. 服务 句 负 载 小 。 只 有 在 文件 资源 更 新 时 ， 浏 览 占 才 会 从 服务 器 
端 下 载 ， 这 样 束 减 小 了 服务 费 资 源 请 求 的 压力 。 


图 1-14 为 Application ”Cache 访问 页 面 资源 和 更 新 缓存 的 具体 流程 。 
Application ” Cache 在 页 面 第 二 次 被 访问 时 开始 生效 。 页 面 打开 时 优先 从 
Application ” Cache 中 访问 资源 ， 读 取 资 源 加 载 后 同时 会 去 请 求 检 查 服务 
羔 的 manifest 文 件 是 否 已 更 新 ， 如 果 没 有 更 新 ， 则 整个 访问 过 程 结束 ; 
侍 则 浏览 器 会 去 检查 manifest 列 表 ， 将 更 新 的 内 容重 新 拉 取 到 Application 
Cache 中 ， 这 样 页 面 第 三 次 被 访问 时 束 可 以 加 载 到 更 新 后 的 内 容 了 。 所 
以 前 端 页 面 开发 完成 后 更 新 的 内 容 将 在 用 户 再 一 次 访问 时 才 会 生效 ， 而 
不 是 马上 就 能 生效 。 通 常 ， 一 个 基本 的 Application ” Cache 离线 页 面 应 用 
至 少 应 该 包括 HTML 页 面 的 manifest 配 置 引 用 与 被 引用 的 manifest 文 件 。 














访问 AppCache 





检查 manifest 文 件 是 否 已 更 新 


将 manifest 更 新 的 文件 重新 从 AppCache 中 读 取 


拉 取 并 更 新 AppCache 


图 1-14 Application Cache 文 件 访问 与 更 新 机 制 


<!-- index.html] --> 


<htm] manifest="app.manifest"> 
<head> 
<title>AppCache Test</title> 
<link rel="stylesheet" href="main-abs931lpd.css"> 
<script src="main-9id3dlsj.js"></script> 
</head> 
<body> 
<div id="main"></div> 
</body> 
</html> 


对 应 的 manifest 描 述 文件 如 下 : 


CACHE MANIFEST 
#VERSION 1.0 
CACHE : 
main-abs931pd,css 


main-9id3d1lsj.js 


假设 这 里 main-9id3dlsj.js 和 main-abs93lpd.css 为 外 部 引用 的 文件 ， 
HTML 下载 时 会 根据 manifest 内 容 去 加 载 Application Cache 中 CACHE 列 表 
下 的 文件 ， 如 果 服 务 器 更 新 ，CACHE 列 表 下 的 内 容 通常 会 发 生变 化 并 
重新 指 问 新 的 资源 列表 ， 浏 览 器 根据 此 来 进行 Application Cache 更 新 。 
另外 需要 注意 的 是 ， 在 更 新 缓存 时 ， 我 们 也 可 以 通过 
window.applicationCache 对 象 来 访问 浏览 器 的 Application cache， 并 可 以 
查看 对 象 的 status 属 性 来 获取 cache 对 象 的 当前 状态 。 








let appCache = window.applicationCache; 


Switch (appCache .Status) { 

case appCache .UNCACHED: // UNCACHED == 909， 表示 未 缓存 
return :UNCACHED ' ， 
break 

case appCache.IDLE: // IDLE == 1， 表 示 闲 置 
return :IDLE' ， 
break 

case appCache ,CHECKING: // CHECKING == 2， 表 示 检 查 中 
return 'CHECKING'; 
break; 

case appCache .DOWNLOADING: // DOWNLOADING == 3， 表 示 下 载 中 
return 'DOWNLOADING'; 
break; 

case appCache.UPDATEREADY: // UPDATEREADY == 4， 表 示 已 更 新 
return ' UPDATEREADY ' ， 
break 

case appCache.0BSOLETE: // 0BSOLETE == 5， 表 示 已 失效 
return 'OBSOLETE'; 
break 

default: 
return 'UKNOWN CACHE STATUS ' ， 


break; 


applicationCache 对 象 也 可 以 主动 更 新 Cache 内 容 ， 不 需要 等 到 下 一 
次 更 新 。 例 如 调用 applicationCache.update() 方 法 ， 这 样 浏览 器 可 以 去 主 
动 尝 试 更 新 用 户 的 Cache (在 manifest 文 件 己 经 改变 的 情况 下 ) 。 最 后 ， 


当 applicationCache.status 处 于 UPDATEREADY 状 态 时 ， 调 用 
applicationCache.swapCache() 方 法 ， 旧 的 Cache 内 容 束 会 被 置换 成 新 的 。 


let appCache = window.applicationCache; 

appCache.update(); // 尝试 更 新 用 户 的 Application Cache 

// TODO... 

if (appCache.status == window.applicationCache.UPDATEREADY) { 
appCache.swapCache(); // 置换 新 的 Application Cache 内 容 





尽管 Application Cache 的 实现 很 方便 ， 但 是 仍然 需要 注意 以 下 几 个 


问题 。 


1. Application Cache 已 经 开始 被 标准 弃 用 ， 渐 渐 将 会 由 
ServiceWorkers 来 代 奉 ， 所 以 现在 不 建议 使 用 Application Cache 来 实现 离 
线 应 用 ， 仅 作为 一 种 技术 了 解 即 可 。 


2. Application Cache 仍 不 能 兼容 目前 全 部 主流 的 浏览 器 环境 ， 即 使 
是 在 移动 端 。 


3. Application Cache 为 站 点 离线 存储 提供 的 容量 限制 是 5MB， 现 在 
来 说 显然 不 适用 。 


4. 如 果 manifest 文 件 或 者 内 部 列表 中 的 某 一 个 文件 不 能 正常 下 载 ， 
整个 更 新 过 程 将 视 为 失败 ， 浏 览 费 将 继续 使 用 旧 的 缓存 。 


5. 引用 manifest 的 HTML、 绥 存 列 表 的 静态 资源 必须 与 manifest 文 
件 同 源 ， 即 保持 在 同一 个 域 下 。 


6. 站 点 中 的 其 他 页 面 即使 没有 设置 manifest 属 性 ， 请 求 的 资源 也 会 


从 绥 存 中 访问 。 
7. 当 manifest 文 件 发 生 改 变 时 ， 资 源 请 求 本 号 也 会 触发 更 新 。 


总 之 ，Application Cache 仍 是 一 个 不 成 熟 的 本 地 缓存 解 决 方案 ， 实 
际 项 目 中 也 并 不 推荐 使 用 ， 但 其 设计 思路 为 我 们 后 面 实现 离线 访问 机 制 
提供 了 方 癌 。 


cacheStorage 








cacheStorage 是 在 ServiceWorker 规 范 中 定义 的 ， 可 用 于 保存 每 个 
ServiceWorker 声 明 的 Cache 对 象 ， 是 未 来 可 能 用 来 代 蔡 Application Cache 
的 离线 方案 。cacheStorage 有 open()、match()、has ()、delete()、keys 0 五 
个 核心 API 方 法 ， 可 以 对 Cache 对 象 的 不 同 匹 配 内 容 进 行 不 同 的 啊 应 ， 
cacheStorage 在 浏览 器 端 为 window 下 的 全 局 内 置 对 象 caches， 那 么 我 们 
就 可 以 直接 通过 下 面 的 形式 来 使 用 了 。 





caches.has(); // 检查 如 果 包 含 Cache 对 象 ， 则 返回 一 个 promise 3 
caches .open( ); // 打开 一 个 Cache 对 象 ， 并 返回 一 个 promise 对 象 
caches.delete( ); // 删除 Cache 对 象 ， 成 功 则 返回 一 个 promise 对 象 ， 
caches. keys( ); // 含有 keys 中 字符 串 的 任意 一 个 ， 则 返回 一 个 promi 
caches ,match( ); // 匹配 key 中 含有 该 字符 串 的 cache 对 象 ， 返 回 一 个 











要 了 解 cacheStorage， 我 们 必须 深入 了 解 一 下 ServiceWorker， 
ServiceWorker 与 WebWorker 一 样 是 在 浏览 器 后 台 作 为 一 个 独立 的 线程 运 
行 的 JavaScript 脚 本 ， 可 以 为 浏览 器 提供 并 行 的 计算 和 数据 处 理 能 力 ， 并 
通过 message/postMessage 方 法 在 页 面 之 间 进 行 通信 ， 但 是 不 能 与 前 端 界 
面 进 行 交 互 。 我 们 知道 Native APP (一 般 指 移动 客户 端的 原生 应 用 ) 可 





以 做 到 消息 推送 、 离 线 使 用 、 目 动 更 新 等 ， 同 样 地 ， 如 果 使 用 
ServiceWorker 也 可 以 让 Web 应 用 具有 类 似 功 能 。 


图 1-15 为 ServiceWorker 运 行 的 生命 周期 ， 我 们 在 使 用 ServiceWorker 
时 通常 需要 先 注册 ServiceWorker 的 脚本 文件 ， 然 后 在 其 脚本 中 运行 
caches 的 绥 存 控制 方法 ，caches 是 浏览 器 提供 的 用 于 存储 文件 缓存 管理 
的 对 象 ， 也 是 浏览 器 提供 的 cacheStrage 全 局 对 象 。 例 如 我 们 可 以 用 如 下 
方法 在 浏览 器 中 注册 一 个 ServiceWorker。 


Installing 
Activated 







Terminated Fetch/ 
Message 


图 1-15 ”ServiceWorker 运 行 的 生命 周期 





if (navigator.serviceworker) { 


navigator.serviceWorker .register('./service-worker.]js').then( 


{ 
console.1og('service worker 注册 成 功 ' ) ; 
}).catch(function (err) { 
console.1og('servcie worker 注册 失败 ') 
}); 
} 


// service-worker.]js 

let cacheList = |[ 
main.js'， 
main.css' 


] ， 


// 这 样 就 将 缓存 的 文件 列表 注册 到 CacheStorage 里 面 了 ， 浏 览 器 端 使 用 caches 


this.addEventListener('install', function(event) { 





// 添加 cacheStorage 缓存 
event .waitUntil( 
caches.open('my-page-cache').then(function(cache) { 
return caches.addAll(cacheList); 
}) 
); 
}); 


这 样 就 将 cacheList 中 的 两 个 文件 路 径 注 册 到 cacheStorage 中 了 ， 通 过 
监听 ServiceWorker 的 fetch 方 法 ， 如 果 匹 配 到 这 两 个 文件 对 应 的 URL 路 径 
请 求 ，cacheStorage 束 可 以 返回 特定 的 本 地 缓存 进行 啊 应 ， 而 不 用 再 癌 


服务 端 发 送 请 求 。 而 且 ServiceWorker 脚 本 的 更 新 也 很 简单 ， 版 本 更 新 后 
注册 引用 新 的 文件 就 可 以 了 。 


// 根据 ServeWorker 返回 caches 中 的 文件 ， 而 不 发 送 浏览 器 请 求 


this.addEventListener('fetch', function(event) { 





event.respondwith(caches.match(event.request).then( 
function(response) { 
// 如 果 有 线 上 返回 内 容 ， 则 直接 返回 


if (response) { 








return response,; 


} 


let responseToCache = response.clone(); 
/ 否则 读 取 缓存 里 面 的 响应 返回 


caches.open('my-page-cache').then(function(cache) { 





cache.put(event.request, responseToCache); 
}); 
}); 
})); 
}); 





通过 这 种 方式 实现 离线 缓存 的 优点 是 可 以 利用 浏览 器 的 本 里 机 制 来 
实现 ， 而 不 需要 过 多 服务 端 复杂 的 设计 。 然 而 我 们 也 需要 知道 ， 目 前 
ServiceWorker 的 浏览 器 兼容 性 很 差 ， 守 致 这 种 方案 还 不 成 熟 ， 至 少 在 短 
期 内 仍 不 是 一 个 可 行 的 方案 。 








Flash 绥 存 


Flash 绥 存 的 方式 目前 应 用 比较 少 ， 它 主要 基于 网 页 端 Flash， 有 共有 
读 写 浏览 器 端 本 地 目录 的 功能 ， 同 时 也 可 以 癌 JavaScript 提 供 调 用 的 
API， 这 样 页 面 就 可 以 通过 JavaScript 调 用 Flash 去 读 写 指定 的 磁盘 目录 ， 
达到 本 地 数据 绥 存 的 目的 。 





关于 浏览 器 缓存 实现 的 搁 术 和 方式 较 多 ， 尤 其 是 在 较 新 的 浏览 器 
上 ， 但 我 们 仍 要 明白 目前 可 以 在 项 目 中 配置 应 用 的 只 有 HTTP 缓 存 、 
localStorage 和 Cookie。ServiceWorker 在 将 来 可 能 会 被 使 用 ， 但 目前 兼容 
性 的 欠缺 仍然 不 能 忽视 ， 其 他 的 缓存 方式 我 们 仅 作 为 知识 了 解 即 可 。 








参考 资料 : 


http://www.html5rocks.com/en/tutorials/webdatabase/websql- 
indexeddb/。 


http://www.html5rocks.com/en/tutorials/offline/storage/。 


http://www.html5rocks.com/en/tutorials/service- 


worker/introduction/。 


1.3 ”有 前 病 融 效 开 发 技术 


前 端 项 目 工 程 随 着 网 站 项 目 或 web App 项 目的 出 现 而 产生 ， 随 着 项 
卓越 来 越 庞 大 ， 前 端 工程 的 开发 工作 也 越 来 越 复 杂 。 对 于 前 端 工程 师 来 
说 ， 掌 握 和 运用 什么 样 的 前 端 开 发 技术 直接 决定 着 前 端 项 目 实践 中 的 工 
程 开 发 效率 是 什么 样 的 。 那 么 前 端 开发 技术 具体 指 的 是 什么 呢 ? 通俗 地 
说 ， 前 端 开发 技术 指 的 是 前 端 开 发 实践 过 程 中 所 用 到 的 一 切 工 程 方法 和 
手段 。 





， 我 们 就 来 简单 聊 一 聊 与 前 端 开 发 技术 相关 的 内 容 。 





在 前 端 实践 中 ， 任 何 项 目的 开发 仍然 需要 从 最 基本 的 编辑 器 说 起 。 
工 欲 善 其 事 ， 必 先 利 其 器 。 蜗 效 便捷 的 开发 工具 能 帮助 我 们 提高 编码 的 
效率 ， 避 免 不 必 要 的 时 间 消 耗 。 就 前 端 而 言 ， 主 流 的 开发 工具 主要 有 
Sublime、Webstorm、Vscode、Vim 等 ， 你 可 能 要 说 这 里 没有 你 认为 优 
秀 的 编辑 工具 ， 我 们 先 以 这 四 种 前 器 开 发 工具 为 例 做 -- 个 简单 的 比较 ， 
后 续 继 续 讨 论 其 他 工具 。 





表 1-3 中 简单 列举 了 一 些 主流 的 前 端 开 发 编辑 工具 及 其 优 缺 点 。 























表 1-3 前端 香 用 开发 工具 


优 奴 二 
] | 级 、 插 件 齐全 的 开发 工具 ， | 没有 自 带 debug 和 断 点 功 | 








sublime | 扩展 插件 工具 履 盖 非常 全 面 能 


集成 较 全 面 的 开发 工具 ， 也 可 以 选 | 二 
Webstomm 择 扩展 ， 可 使 用 命令 行 或 断 点 。 | 站 下 愧 时 级 

较 轻 量 级 ， 原 生 支 持 TypeScript， 这 过 桂 币 寺 
Vscode | 关联 断 点 调试 非常 方 使， 也 可 扩展 | 外 对 冠 至 全 机能 





| 





oe 入 门 相对 难 ， 没 有 较 多 前 
im 。 |Linux 下 可 选 的 高 交工 具 端 对 应 的 高 效 辅助 插件 











无 论 选择 哪 一 种 ， 一 球 高 效 的 开发 工具 都 应 该 具备 以 下 几 个 方面 的 
能 力 。 


o 代码 格式 化 Format 能 力 。 编 辑 器 具有 自动 按照 默认 的 设置 或 人 
为 设 定 的 规范 格式 化 HTML/JavaScripWCSS 等 语法 代码 的 能 
力 ， 避 免 我 们 花费 时 间 去 调整 不 规范 的 格式 。 


co 代码 模板 Snippet 能 力 。 例 如 ， 人 快捷 键 + tab 具 有 目 动 生成 for 循 环 
或 try...catch 代 码 块 的 能 力 ， 避 免 我 们 手动 输入 重复 代码 或 注 
释 而 花费 大 量 的 时 间 。 





o 自动 检测 错误 能 力 。 例 如 ， 各 种 代码 Lint、Hint 工 具 自 动 提 示 
HTML 、JavaScript、CSS 不 规范 的 地 方 ， 辅 助 我 们 快速 开发 ， 
不 用 自己 查找 一 些 低 级 的 语法 错误 或 不 规范 的 地 方 。 











o 编辑 快捷 键 能 力 。 这 应 该 是 任何 一 个 高 效 的 工具 都 要 具备 的 能 
力 ， 而 且 快 捷 键 应 该 越 全 越 好 。 


o 自动 Debug 能 力 。 现 在 大 多 浏览 器 能 提供 这 一 功能 ， 每 个 人 也 
可 以 按 需 选择 ， 最 新 的 Chrome 也 文 持 ECMAScript ”6 以 上 的 调 
试 ， 如 果 编 辑 器 能 具备 这 个 能 力 当 然 再 好 不 过 。 





o Git 或 Svn 版 本 控制 插件 能 力 。 这 个 功能 开发 者 可 以 根据 需要 自 
行 选择 ， 关 于 Git 或 Svn 的 使 用 这 里 不 做 阐述 。 








o 上 自动 文档 工具 。 开 发 的 过 程 中 应 尽量 保留 文档， 但 是 我 们 很 可 
能 没有 太 多 时 间 写 文 要 ， 因 此 ， 如 条 编辑 器 插件 能 帮助 我 们 目 
动 高 效 生 成 代码 文档 注释 就 比较 好 了 。 另 外 要 注意 的 是 ， 目 文 
档 化 代码 的 编写 也 是 一 个 很 好 的 习惯 。 











很 多 时 候 编 辑 器 其 实 无 法 满足 上 述 所 有 的 功能 ， 那 就 要 根据 我 们 目 
己 的 核心 需求 进行 选择 了 。 每 个 人 的 核心 需求 可 能 不 同 ， 选 择 也 不 同 ， 
但 无 论 怎样 ， 好 的 工具 的 核心 特点 是 能 够 帮助 我 们 实现 高 效 开 及 ， 而 不 
是 工具 本 吴 有 具备 的 功能 ， 过 多 地 关注 工具 本 吴 就 舍 本 逐 末 了 。 




















在 我 们 开始 融 键 盘 之 前 ， 最 好 确认 编辑 工具 是 否 具 有 以 上 这 几 点 高 
效 的 特性 。 但 如 果 你 还 没有 使 用 到 这 些 扩展 的 辅助 功能 ， 那 么 请 赶紧 去 
完善 工具 ， 好 的 开发 工具 不 仅 可 以 提高 我 们 开发 的 速度 ， 也 可 以 辅助 我 
们 写 出 更 高 质量 的 代码 。 


FE 
1.3.2 ”前 山高 效 调试 工具 
前 端 快速 调试 工具 Chrome 浏 览 器 
通常 前 端 开 发 过 程 中 使 用 最 多 的 调试 工具 大 概 就 是 Chrome 浏 览 器 


了 ， 早 期 使 用 Firefox 浏 览 右 较 多 ， 不 过 现在 使 用 的 人 很 少 ， 只 是 偶尔 会 
考虑 页 面 在 Firefox 浏 览 右 上 的 兼容 性 问题 。 


虽然 Chrome 只 是 一 款 浏 览 器 ， 但 是 要 了 解 使 用 Chrome 所 有 的 开发 


调试 技巧 也 是 很 难 的 。 另 外 还 有 一 些 高 效 的 开发 者 工具 插件 ， 如 
Postman、hostAdmin 等 。 图 1-16 为 Chrome 浏 览 器 的 调试 工具 界面 。 














[Rx 0O] | Elements Console Sources Network Timeline Profiles Application Security Audits @1| ; X 
Styles Computed Event Listeners DOM Breakpoints Properties 
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图 1-16 Chrome 浏览 器 调试 工具 界面 








在 Chrome 浏 览 费 中 ， 用 F12 打 开 控 制 台 后 ， 一 名 优秀 的 前 端 工程 师 
需要 尽量 保证 自己 对 里 面 95% 以 上 的 操作 和 内 容 都 很 熟 严 ， 这 样 才 可 以 
说 是 基本 运用 自如 。Chrome 的 调试 面板 主要 包括 设备 模拟 、FElements、 
Console、Sources、Network、Timeline、Profiles、Resources、Security、 


Audits 这 些 内 容 。 


o 设备 模拟 不 仅 可 以 让 Chrome 模 拟 移动 端 浏览 器 和 桌面 浏览 器 中 
打开 页 面 的 情况 ， 而 且 还 可 以 模拟 移动 端 中 常见 的 不 同 机 型 屏 





幕 大 小 和 分 辩 率 情况 下 加 载 页 面 的 显示 结果 ， 或 者 上 自己 添加 特 
定 模 拟 设备 的 屏幕 来 模拟 显示 效果 。 





Elements 则 可 以 用 于 阅读 DOM 结 构 和 和 DOM 样式 的 内 容 及 规则 ， 
或 者 添加 阻塞 DOM 泻 染 的 断 点 功能 来 看 页 面 的 演 染 细节 。 





Console 的 功能 是 查看 控制 台 输 出 的 内 容 或 者 直接 执行 某 部 分 
JavaScript 脚 本 的 运行 命令 行 。 


通过 Sources 我 们 可 以 浏览 网 站 加 载 的 所 有 静态 目录 资源 ， 同 时 
可 以 进行 资源 内 容 的 查看 阅读 和 脚本 的 断 点 调试 。 


NetWork 常 用 于 但 看 页 面 内 容 加 载 的 网 络 请 求情 况 ， 如 请 求 的 
返回 码 、 类 型 、 大 小 、 消 耗 时 间 、 网 页 资源 加 载 时 序 图 等 。 


使 用 Timeline 可 以 查看 浏览 喜 执 行 性 能 和 内 存 消 耗 的 时 序 图 情 
况 。 


Profiles 是 测试 网 页 性 能 消耗 的 一 种 方式 ， 用 于 统计 例如 CPU 等 
系统 资源 在 页 面 加 载 过 程 中 的 消耗 分 布 情况 。 


Application〔 旧 版 的 Chrome 浏 览 器 中 为 resources〉 用 于 查看 
Chrome 浏 览 器 绥 存 情况 ， 主 要 包括 HTTP 文 件 绥 存 、 
Application ”Cache、ServiceWorker 绥 存 对 象 、LocalStorage、 
SessionStorage、IndexedDB、WebSQL、Cookies、Cache 
Storage 等 缓存 空间 中 的 情况 。 


Security 用 于 管理 网 站 安全 证 书 ， 例 如 ， 在 HITPS 的 网 站 下 面 我 
们 可 以 通过 它 来 查看 网 站 使 用 的 证 书 内 容 。 











o Audits 则 可 以 根据 目前 页 面 文档 加 载 和 脚本 执行 情况 给 出 当前 
前 端 页 面 的 部 分 优化 建议 ， 这 对 于 前 端 页 面 的 优化 具有 极其 重 
要 的 借鉴 意义 。 


除了 普通 的 Debug 和 模拟 移动 设备 这 些 功能 ，Chrome 还 提供 了 移动 
连接 模拟 真实 设备 的 inspect 人 查看 功能 。 例 如 ， 在 Chrome 地 址 栏 中 输入 
chrome://inspect/#devices 即 可 查看 主机 当前 连接 的 移动 设备 浏览 器 打开 
网 页 的 情况 ， 并 可 以 阅读 DOM 结 构 和 查看 Debug 信 息 。Chrome 还 有 很 
多 有 意思 的 扩展 功能 ， 打 开 chrome://chrome-urls / 就 可 以 知道 所 有 
Chrome 文 持 的 扩展 功能 信息 ， 包 括 浏览 器 的 各 类 工具 界面 入 口 。 


chrome://version/  ”// 查 看 系统 信息 
chrome://inspect/  ”// 查 看 连接 设备 调试 信息 
chrome://downloads // 浏 览 器 下 载 管理 






































chrome://settings/ // 浏 览 器 设置 


当然 ， 只 会 使 用 Chrome 浏 览 器 调试 是 远 远 不 够 的 ， 使 用 Chrome 可 
以 帮助 我 们 便捷 快速 地 定位 大 部 分 脚本 逻辑 或 页 面 性 能 问题 ， 但 是 如 果 
要 开发 多 浏览 器 下 的 莱 容 页 面 ， 还 必须 要 考虑 兼容 Internet Explorer、 
Firefox 或 移动 端 各 种 版 本 真实 环境 的 浏览 器 ， 所 以 这 时 Chrome 通 党 只 作 
为 项 目前 期 高 效 开 发 的 调试 工具 ， 开 发 完成 后 仍 需要 考虑 更 多 不 同 浏览 
器 版 本 的 兼容 性 问题 。 





网 络 辅助 工具 


除了 前 端 调试 工具 ， 我 们 通常 还 需要 依靠 一 些 辅助 工具 来 协助 开 


发 。 前 端 开 发 中 必须 要 提 到 的 一 个 辅助 开发 工具 就 是 Fiddler， 没 有 使 用 
过 的 建议 尝试 下 。 其 基本 原理 是 作为 本 地 的 一 个 代理 服务 ， 将 特定 的 应 
用 层 网 络 请 求 拦 截 ， 来 模拟 需要 的 不 同 场景 。 拦 截 处 理 规则 可 以 由 使 用 
者 来 制定 。 其 实 很 像 一 个 本 地 的 Nginx 服 务 器 ， 对 配置 的 域名 或 地 址 请 
求 返 回 对 应 的 模拟 啊 应 内 容 。 除 了 获取 本 机 的 网 络 请 求 ，Fiddler 还 可 以 
作为 代理 拦截 其 他 连 入 设备 的 请 求 ， 这 样 我 们 在 移动 端 进 行 开 发 时 ， 真 
实 设 备 上 的 请 求 就 可 以 通过 配置 Fiddler 代 理 来 获取 了 。 











如 图 1-17 所 示 ， 将 移动 设备 的 网 络 配置 代理 指向 一 台 运 行 Fiddler 的 
开发 计算 机 ， 那 么 移动 设备 发 起 的 HTTP 请 求 都 会 经 过 开发 计算 机 被 
Fiddler 代 理 拦截 ， 然 后 便 可 以 直接 配置 执行 该 请 求 的 返回 。 例 如 将 
http://www.domain.com/text.html 的 URL 请 求 返 回 开发 计算 机 中 磁盘 的 
text.html 文 件 内 容 ， 或 者 模拟 访问 http://www.domain.com/index.htm 地 址 
返回 404 的 情况 。 除 此 之 外 ，Fiddler 也 可 以 查看 请 求 资源 内 部 信息 ， 查 
看 资源 加 载 时 序 图 ， 模 拟 在 慢 速 网 络 下 查看 页 面 内 容 输出 和 调试 的 情况 
等 。 有 人 基于 Fiddler 做 了 一 个 Willow 的 插件 来 实现 更 强 的 代理 替换 规 
则 ， 例 如 ， 路 径 目 录 蔡 换 、 特 定 DNS 域 名 替换 、HOST 配 置 等 。 总 的 来 
说 ，Fiddler 目 前 已 经 成 为 前 端 开发 中 不 可 或 缺 的 辅助 开发 工具 之 一 。 


| 代理 接 入 访问 一 一 一 一 互联 网 访问 


移动 设备 Wn 














Fiddler 规 则 配置 
http://www. domain. com/text.html C:\\text.html 
http://www. domain. com/index. html 404 














图 1-17 Fiddler 设置 代理 工作 流程 











Node 调 试 工具 


讲 Node 调 试 工具 是 因为 Node 端 开 友 在 本 书 中 被 列 为 前 端 知识 内 容 
的 一 部 分 ， 后面 的 革 市 会 展开 介绍 ， 所 以 这 里 我 们 先 简 单 了 解 一 下 Node 
的 开发 调试 方式 。 





服务 端 开发 调试 的 工具 也 比较 多 。 例 如 node-supervisor、node- 
inspector 及 以 后 可 能 出 现 的 新 工具 。 这 类 工具 入 门 很 简单 ， 按 照 参考 文 
档 安 装 后 ， 用 它们 特定 的 命令 启动 应 用 入 口 文件 就 可 以 了 。 举 例 来 说 ， 
node-inspector 安 装 如 下 。 








$ npm install -g node-inspector 
$ node-debug app.js 
Node Inspector is now available from http://127.0.0.1:8080/?ws=12 


Debugger listening on port 5858 


这 样 要 调试 的 Node 端 服务 就 通过 debug 模 式 启动 了 ， 我 们 还 需要 用 
node-inspector 服 务 将 运行 的 代码 同步 到 浏览 器 端 进行 调试 ， 因 此 还 需 打 
开 另 一 个 终端 。 


$ node-inspector 
Node Inspector vO.11.2 
Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start 





这 时 node-inspector 会 启动 一 个 远程 可 访问 的 网 络 端口 服务 ， 开 发 者 

过 浏览 器 可 以 对 Node.js 的 文件 进行 查看 同时 断 点 调试 。 访 问 
ee 图 1-18 所 示 
的 一 个 文件 目录 的 调试 界面 ， 然 后 我 们 就 可 以 进行 断 点 调试 了 。 


Q Network |Sources| Profiles Console = 党 
Sources | Content scripts Snippets run-rapljs modulejs indexjs |indexjs x r+ + 弛 加 

1| (function (exports, require, module, _fileneme, _dirname) { ‘use 5trict') ^ = Watch Expressions 
2 Call Stack 


t http = require("http’); 
Module. compile 





st koa = require( “kos') 
t logger = require('k 
serve = require(’ 
st stylus = requirel k 






Module, extensions.js mo 





) 
); Moduleload 
*). 





Module._load 


Module.runMain 









istOnTimeout 
W Scope Variables 
| // Create koa app ? 
15| const app = koa(); 


17| // micdleware 
18 | apo.use(logger()); 


29 | // 设 置 神态 目录 内 容 
21| app,use(serve(' .Jpages')) .use(serve(' /dev')).use(serve(' ,/mock"')); kz: undefined 

re: function require(p- 
ox: undefine 





二 NodelnspectorOverrides,s 
>» lib 












到 inde process.env.SE. 
process.env .SE 
99， 

29 keySchema: "xD:schema'， 
39 Key: ‘XD:session Y Breakpoints 






卫 ION_PORT_5379_TCP_ADDR || '127.9.6.1， wrapper; 
v OE/github/fis3-koa-node/server ION_PORT_6379_TCP_PORT || 6338, 1 

> controller 
blib 

pO node modules 


bp Closure 








34| app.use(koaBody(T 
35 formidable; { 
36 uploadDir: _dirname 





it: "10mb", 
: ‘lemb 





* 运行 时 错误 处 理 ， 这 里 很 重要 
Eparam {[type]} [descripticn] 
@return {[type]} [description] 











46| app.on('error'，function(err) { 
47 console. log(err); 
8 log.error('server error’, err); 
49| }); MM 
4 "| {《} Une1Column1 





图 1-18 node-inspector 浏 览 器 端 调试 界面 


如 图 1-19 所 示 ， 之 所 以 能 这 样 做 是 因为 node-inspector 这 类 调试 工具 
可 以 将 Node 服 务 的 JavaScript 代 码 解 析 后 通过 自身 开局 的 端口 发 送 到 浏 
览 器 端 运行 ， 这 样 可 以 将 Node 羡 的 JavaScript 的 逻辑 映射 到 浏览 右 中 控 
制 执行 ， 实 现 Node 并 执行 代码 和 浏览 器 载 入 代码 同步 调试 功能 。 当 然 ， 
调试 时 一 般 推荐 使 用 较 新 版 本 的 Chrome 浏 览 器 。 


Node JavaScript 


代码 





发 送 到 浏览 器 运行 通过 端口 解析 获取 代码 





Inspector 服务 
图 1-19 ”Inspector 远 程 调试 运行 原理 

















除 此 之 外 ，Node 湛 开 友 也 可 以 同 其 他 服务 端 语言 开发 一 样 使 用 更 直 
接 的 方式 ， 例 如 通过 输出 log 日 志文 件 或 信息 来 进行 Node 问 的 开发 调试 





前 端 远程 调试 工具 


在 前 端 页 面 开 发 中 ， 除 了 一 般 的 开发 调试 方法 ， 也 有 一 些 例如 
Vorlon.js、Weinre 等 用 于 移动 端 浏 览 句 的 远程 调 斌 工具。 前端 远 程 调 试 
工具 的 原理 和 使 用 方式 跟 node-inspect 类 似 ， et 
务 将 远程 设备 上 的 代码 发 送 到 开发 机 器 的 模拟 浏览 器 上 逐 行 执行 ， 同 时 
开发 机 模拟 浏览 器 上 的 操作 也 要 回馈 给 远程 设备 。 ms 使 用 vorlon 来 
进行 远程 调试 就 可 以 通过 以 下 代码 来 实现 。 


$ npm install -g vorlon 


$ vorlon 
2016-12-12 13:6:57 - info: Vorlon.js PROXY listening on port 5050 
2016-12-12 13:6:57 - info: Vorlon.js SERVER listening on port 133 





此 外 ， 我 们 还 需要 在 页 面 中 引用 一 个 JavaScript 文 件 来 支持 浏览 
vorlon 的 调试 服务 。 


<script src="http://localhost:1337/vorlon.js"></script> 





这 样 页 面 上 就 可 以 显示 如 图 1-20 所 示 的 浏览 占 端 远程 调试 的 界面 
了 。 








congole x 
© i ¥ 团 preserve io 
No meta viewport toeg found, defaultis 
A “webkitAvdiotontext’ 15 depre -0G, Ple. use “MudioContext™ instead, codernizr js:4 
a os ndew. PC rageInfo” is deprecated, Pleys¢ Use Rdiernixr ,ji 
avigaton. WebkitTenmpornanyStonage” on Nb instead. 


AB “webkitURL’ is deprecated. Please use ‘URL* instead, sodernizr, 14:4 
》 











1-20 Vorlon 远 程 调试 运行 界面 








例如 在 ee 览 吉 上 选中 一 个 <div> 元 素 ， 这 时 Vorlon 或 Weinre 的 
Node 端 服务 会 通知 将 远程 设备 上 对 应 的 这 个 元 素 加 上 一 个 高 亮 边框 来 表 
示 该 元 素 被 选中 。 相 对 于 node-inspect， 这 里 的 远程 设备 可 能 是 真实 的 移 








动 端 设 备 ， 而 不 是 Node.js 环 境 。 


如 图 1-21 所 示 ， 调 试 代 理 服 务 器 可 以 将 远程 设备 浏览 右 中 的 内 容 加 
载 到 开发 机 上 重新 解析 ， 开 发 机 浏览 喜 上 的 操作 也 会 通过 调试 代理 服务 
的 特定 端口 同步 到 远程 设备 上 啊 应 ， 这 样 就 可 以 在 开发 机 浏览 器 上 实时 
查看 远程 设备 浏览 需 上 显示 的 内 容 了 ， 而 且 开 发 机 模拟 浏览 器 上 的 操作 
也 可 以 映射 同步 到 远程 设备 上 。 





同步 代码 同步 代码 





Vorlon 等 代理 调试 服务 
图 1-21 ”前端 远程 调试 运行 原理 























基于 项 目 实践 经 验 ， 这 种 调试 方式 虽然 看 起 来 比较 高 效 ， 但 使 用 时 
问题 较 多 ， 而 且 代 理 调 试 服务 器 由 于 频繁 进行 同步 可 能 会 导致 内 容 不 稳 
定 也 是 一 个 问题 。 例 如 ， 有 时 同步 刷新 的 实时 性 不 强 ， 或 者 直接 没 反 
应 。 所 以 大 家 可 以 了 解 这 种 调试 方式 ， 必 要 的 时 候 作 为 备用 方案 使 用 ， 
从 实际 开发 的 角度 上 来 讲 ， 还 是 尽量 先 使 用 Chrome 配 合 Fiddler 辅 助 工 具 
的 方式 来 高 效 快 速 地 定位 大 部 分 问题 。 





除了 上 面 介绍 的 开发 调试 方法 ， 还 有 一 些 其 他 的 可 选调 试 方案 。 实 
际 开发 中 我 们 可 能 并 不 会 都 用 到 ， 具 体 要 根据 实际 场景 和 个 人 习惯 来 选 
择 。 更 多 时 候 我 们 遇 到 的 问题 是 可 控 的 ， 大 多 数 问题 也 不 是 必须 使 用 某 
个 特定 的 调试 方法 才能 重 现 解决 的 ， 所 以 在 开发 过 程 中 还 要 灵活 选择 运 
用 。 





1.4 本 章 小 结 


这 一 草 主 要 介绍 了 前 端 技术 的 及 展 概况 以 及 一 些 必须 掌握 的 浏览 器 
基础 知识 与 名 用 开发 技术 。 总 体 来 说 ， 对 前 端 技术 的 发 展 和 前 景 有 一 个 
正确 的 认识 是 作为 前 端 工程 师 最 基本 的 系 养 ， 男 外 ， 掌 握 浏 览 右 缓存 技 
术 也 能 帮助 我 们 整体 把 握 持 久 化 存储 的 实现 概貌 ， 有 利于 我 们 根据 实际 
的 应 用 场景 选择 合适 的 缓存 方案 。 作 为 前 端 工程 师 ， 我 们 需要 做 的 事情 
还 有 很 多 ， 这 也 是 现代 前 并 赋予 我 们 的 机 遇 和 挑战 。 下 一 章 中 ， 我 们 将 
对 前 端 相 关 的 协议 进行 分 析 总 结 ， 让 读者 从 基础 概念 和 实践 中 理解 与 前 
端 相关 的 各 类 协议 的 原理 与 实现 。 














第 2 章 ” 前端 与 协议 


我 们 知道 ， 浏 览 器 上 解析 执行 的 HTML、CSS 和 JavaScript 文 件 通常 
是 通过 网 络 请 求 从 Web 服 务 器 上 下 载 解析 的 ， 加 载 过 程 中 ， 浏 览 器 通过 
网 络 模块 创建 下 载 进程 ， 发 起 HTTP 请 求 ， 将 HTML 文 本 、CSS 样 式 或 
JavaScript 脚 本 装载 进 浏 览 器 解析 或 运行 。 这 里 就 涉及 了 一 些 相 关 的 网 络 
协议 ， 我 们 可 以 认为 与 前 端 关系 最 密切 的 协议 是 HTTP 协 议 ， 因 为 几乎 
所 有 的 前 端 相 关 资 源 文 件 均 是 通过 HTTP 协 议 请 求 完 成 的 。 前 端 Web 应 
用 的 发 展 加 速 了 前 后 端 技术 的 分 离 ， 这 种 开发 模式 降低 了 前 端 与 服务 端 
的 耦合 ， 但 是 前 端 和 服务 端 之 间 的 交互 数据 通信 仍 是 通过 协议 来 完成 
的 ， 这 里 的 协议 可 以 认为 是 前 后 端 开 发 者 之 间 主 观 协商 形成 的 一 层 数 据 
接口 规范 。 当 然 ， 还 有 基于 SSL (Secure Sockets ”Layer， 安 全 套 接 字 
层 ) 层 的 HTTPS 协 议 。 进 入 移动 互联 网 时 代 后 ， 移 动 端 Web 脚 本 开始 需 
要 与 移动 端 原生 程序 进行 交互 ， 这 便 涉 及 与 移动 端 Native 原 生 程 序 交 互 
的 协议 。 除 了 这 些 还 有 HTML5 的 WebSocket 实 时 通信 协议 、 与 服务 端 交 
互 的 RESTful 协 议 等 。 





可 见 ， 各 类 协议 在 前 端 开 发 中 被 应 用 于 方方面面 ， 那 么 在 这 一 章 
中 ， 我 们 束 一 起 来 看 看 与 前 端 开 友 和 密切 相关 的 协议 。 





2.1 HTTP 协议 简介 


2.1.1 _ HTTP 协议 概述 


HTTP (HyperText Transport Protocol， 超 文本 传输 协议 ) 协议 是 
WWW 服 务 器 和 用 户 请 求 代理 《例如 浏览 器 等 ) 之 间 通 过 应 答 请 求 模式 
传输 超 文 本 (例如 HTML 文 件 、JavaScript 文 件 、CSS 文 件 、 图 片 甚至 服 
务 器 接口 数据 等 ) 内 容 的 一 种 协议 ， 协 议 的 详细 规范 序号 为 RFC2616。 


图 2-1 为 某 用 户 使 用 浏览 器 请 求 http:/www.jixianqianduan.comy/ 首 页 
和 应 答 时 HTTP 消 息 内 容 的 传递 过 程 。 浏 览 器 (用 户 请 求 代 理 ) 癌 服 务 
器 发 送 请 求 时 头 部 中 包含 请 求 的 方法 GET、URL (Uniform Resource 
Location， 统 一 资源 定位 符 ) http:Wwww.jixianqianduan.com/、 协 议 版 本 
号 1.1、 请 求 头 域 字段 〈 如 请 求 接受 类 型 Accept) 、 绥 存 控制 Cache- 
Control、 浏 览 器 Cookie 和 user-Agent 信 息 等 ， 同 时 也 可 能 会 带 上 请 求 的 
正文 内 容 。 服 务 器 接收 请 求 处 理 后 也 是 以 一 段 啊 应 报 文 作为 返回 ， 啊 应 
的 内 容 包 括 HITP 消 息 啊 应 的 协议 厂 本 1.1、 返 回 码 304 及 返回 描述 Not 
Modified、 绥 存 控制 信息 Cache-Control 以 及 正文 的 HTML 内 容 等 ， 当 然 
如 果 返 回 码 为 304 时 请 求 啊 应 返回 的 正文 为 空 ， 浏 览 器 将 从 本 地 缓存 中 
读 取 文件 。 浏 览 器 接受 到 服务 器 的 返回 后 会 进行 解析 ， 同 时 进行 相应 的 
操作 ， 例 如 将 服务 器 返回 正文 中 的 HTML 内 容 装载 至 浏览 器 进行 解析 演 
染 ， 或 是 将 服务 器 返回 的 JSON 字 符 串 解析 成 前 端 可 用 的 JSON 对 象 等 。 





Server 













GED A HIMEZAL; 1 

Accept: 接收 类 型 
Cache-Control: max-age=3600 
Cookie: 浏览 器 cookie 信 息 
Host: jixianqianduan. com 
If-Modified-Since: Tue, 12 Jul 2016 09:16:40 GMT 
Proxy= Connection: keep- alive 





.更 多 设置 











HTTP/1.1 304 Not Modified 
Cache-Control: max-age=3600 
Connection: keep-alive 

Date: Wed, 27 Jul 2016 07:38:44 GMT 
Expires: Mon, 25 Jul 2016 04:57:37 GMT 
Vary:Accept-Encoding 


. .HTML 正 文 内 容 


图 2-1 HTTP 应 答 过 程 





通常 一 个 完整 的 HITP 报 文 由 头 部 、 空 行 、 正 文 三 部 分 组 成 。 空 行 
用 于 区 分 报 文 头 部 和 报 文正 文 ， 由 一 个 回 车 符 和 一 个 换行 符 组 成 。 图 2- 
2 是 一 个 HTTP 请 求 报 文 的 格式 结构 : 请 求 头 部 通常 由 请 求 类 型 、 请 求 
URI、 协 议 版 本 和 扩展 内 容 组 成 ;请 求 头 中 还 包含 其 他 请 求 头 部 域 信 
息 ， 如 Accept、Cookie、Cache-Control、Host 等 ;请 求 正 文 可 以 携带 浏 
览 器 端 请 求 的 内 容 ， 如 POST、PUT 请 求 的 表单 内 容 。 响 应 返回 报 文 的 
格式 与 此 类 似 ， 图 2-3 为 服务 器 的 啊 应 报 文 结构 : 啊 应 报 文 头 部 由 状态 
码 、 状 态 摘 述 、 协 议 版 本 、 扩 展 内 容 组 成 啊 应 头 包 含 啊 应 头 部 域 信 
息 ， 如 Date、Content-Type、Cachel-Control、Expires 等 ;服务 器 返回 给 
浏览 器 的 信息 可 以 放 在 报 文正 文部 分 。 




















请 求 头 部 域内 容 : Accept\Cookie\Cache-Control\Host 等 











图 2-3 HTTP 响 应 头 部 结构 


HTTP 协 议 自 出 现 到 现在 ， 先 后 经 历 了 HTTP 0.9 版 本 、HTTP 1.0 版 
本 、HTTP 1.1 版 本 和 HTTP 2 版 本 这 四 个 版 本 。 不 过 ， 目 前 使 用 最 为 广 
泛 的 仍然 是 HTTP 1.1 版 本 。HTTP 1.1 标 准 发 布 于 1999 年 ， 相 对 于 HTTP 
1.0 增 加 了 协议 扩展 切换 、 缓 存 、 部 分 文件 传输 优化 、 长 连接 、 消 息 传 
递 、host 头 域 、 错 误 提 示 等 一 些 重 要 的 增强 特性 。 接 下 来 我 们 就 简单 了 
解 一 下 HTTP 1.1 版 本 中 的 几 个 重要 特性 和 相关 的 应 用 场景 。 


2.1.2 HTIP1.1 
长 连接 


提 到 HTTP ”1.1 协议 ， 我 们 首先 想到 的 一 个 重要 特性 就 是 长 连接 。 
HTTP 1.1 的 长 连接 机 制 是 通过 请 求 头 中 keep-alive 头 域 信息 来 控制 的 。 
HTTP 1.0 默 认 请 求 的 服务 器 返回 是 没有 keep-alive 的 ， 但 在 HITP 1.0 中 ， 
如 末 要 建立 长 连接 ， 也 可 以 在 请 求 消息 中 包含 Connection: keep-alive 头 
域 信 息 ， 如 果 服 务 器 能 识别 这 条 连接 的 头 域 信 息 ， 则 会 在 啊 应 消息 头 域 
中 也 包含 一 个 Connection: ”keep-alive 返 回 ， 表 示 后 面 的 文件 请 求 可 以 复 
用 之 前 的 连接 传输 。 但 是 在 HTTP ”1.1 协议 中 ， 任 何 HTTP 请 求 的 报 文 头 
部 域 都 会 默认 包含 keep-alive.keep-alive 的 控制 可 以 让 客户 端 到 服务 器 端 
之 间 的 连接 在 一 段 时 间 内 持续 有 效 ， 当 一 个 请 求 文件 的 传输 连接 建立 以 
后 ， 在 服务 器 保持 该 连接 的 这 段 时 间 内 ， 其 他 文件 请 求 可 以 复 用 这 个 已 
经 建立 好 的 连接 ， 而 不 用 像 HTTP 1.0 那 样 重新 握手 建立 连接 ， 这 样 就 有 
效 将 建立 和 关闭 连接 的 网 络 开 销 平 均 到 多 个 文件 的 请 求 上 。 例 如 有 n 个 
文件 的 连续 请 求 ， 每 个 文件 请 求 建 立 和 关闭 连接 的 开销 为 ams《〈 宇 
秒 ) ， 那 么 完全 使 用 HTTP ”1.0 协议 完成 所 有 文件 请 求 的 额外 开销 就 为 
nxams， 而 使 用 HTTP ”1.1 协议 来 进行 文件 传输 额外 开销 仪 为 ams。 但 是 
需要 注意 的 是 ， 长 连接 的 请 求 机 制 并 不 会 节省 传输 内 容 的 网 络 开 销 。 








协议 扩展 切换 


协议 扩展 切换 是 指 ，HTTP ”1.1 协议 支持 在 请 求 头 部 域 消息 中 包含 
Upgrade 头 并 让 客户 端 通 过 头 部 标识 令 服务 器 知道 它 能 够 文 持 其 他 备用 


通信 协议 的 一 种 机 制 ， 服 务 器 根据 客户 端 请 求 的 其 他 协议 进行 切换 ， 切 
换 后 使 用 备用 协议 与 客户 端 进行 通信 。 例 如 WebSocket 协 议 承 是 典型 的 
应 用 ，WebSocket 协 议 通 信 是 通过 HTTP 的 方式 来 建立 的 ， 通 信 连 接 建 立 
完成 后 通知 服务 器 切换 到 WebSocket 协 议 来 完成 后 面 的 数据 通信 。 


图 2-4 为 WebSocket 协 议 的 连接 建立 过 程 ， 浏 览 右 《假设 用 户 使 用 的 
浏览 器 文 持 WebSocket) 同 服务 端 发 送 请 求 ， 并 在 消 恩 头 中 添加 
Connection: Upgrade 和 Upgrade: websocket 告 诉 服务 器 后 面 需 要 进行 协议 
切换 ， 切 换 成 为 WebSocket 协 议 进行 通信 ， 如 果 服 务 问 文 持 WebSocket 
服务 并 允许 该 客户 端 来 连接 ， 则 可 以 在 啊 应 报 文 头 中 返回 Upgrade 和 
Connection 消 息 头 域 ， 同 意 浏 览 髓 使 用 WebSocket 来 连接 ， 同 时 返回 的 
状态 码 为 101 表 示 请 求 还 需要 完成 协议 的 切换 。 


WebSocket 的 建立 过 程 





GET /ws HTTP/1.1 

Host: localhost 

Upgrade: websocket 
Connection: Upgrade 

0rigin: http:// 服 务 器 地 址 
Sec-WebSocket-Version: 版 本 
User-Agent: 用 户 代 理 信息 


HTTP/1.1 101 Switching Protocols 
Upgrade: websocket 
Connection: Upgrade 





十 





图 2-4 ”WebSocket 通 信 建 立 过 程 





绥 存 控制 


在 HTTP 1.1 版 本 之 前 ， 浏 览 器 绥 存 主要 是 通过 对 HTTP 1.0 的 Expires 
头 部 控制 来 实现 的 ， 我 们 知道 Expires 只 能 根据 绝对 时 间 来 刷新 缓存 内 
容 ，HTTP ”1.1 增加 了 Cache-Control 尖 域 ， 可 以 支持 max-age 用 来 表示 相 
对 过 期 时 间 ， 另 外 请 求 服务 器 时 也 可 以 根据 Etag 和 Last-Modified 来 判断 
是 否 从 浏览 器 端 缓存 中 加 载 文件 ， 此 时 缓存 的 控制 和 判断 将 决定 服务 器 
的 响应 报 文中 头 部 内 容 的 状态 码 200 还 是 304。 下 面 来 看 一 个 浏览 器 发 送 
HTTP 请 求 时 进行 缓存 读 取 判 断 的 流程 。 


如 图 2-5 所 示 ， 浏 览 套 发 起 请 求 时 ， 头 部 域 字 段 的 判断 过 程 主要 如 
下 所 述 。 


1. 浏览 器 会 先 查 询 Cache-Control (这 里 用 Expires 判 断 也 是 可 以 
的 ， 但 是 Expires 一 般 设 置 的 是 绝对 过 期 时 间 ， 在 HITP ”1.1 之 前 较为 通 
用 ，Cache-Control 设 置 的 是 相对 过 期 时 间 ，HITP 1.1 后 推荐 使 用 Cache- 
Control 来 控制 ， 如 果 两 者 都 设置 了 ， 则 只 有 Cache-Control 的 设置 生效 ) 
来 判断 内 容 是 否 过 期 ， 如 有 果 未 过 期 ， 则 直接 读 取 浏览 器 端 缓存 文件 ， 不 
发 送 HTTP 请 求 ， 人 否则 进入 下 一 步 。 








2. 在 浏览 器 端 判 断 上 次 文件 返回 头 中 是 否 含有 Etag 信 息 ， 有 则 带 
上 If-None-Match 字 段 信 息 发 送 请 求 给 服务 器 ， 服 务 端 判断 Etag 未 修改 则 
返回 304， 如 果 修 改 则 返回 200， 和 否则 进入 下 一 步 。 


3. 在 浏览 器 端 判 断 上 次 文件 返回 头 中 是 人 否 含 有 Last-Modified 信 
妃 ， 有 则 带 上 If-Modified-Since 字 段 信 息 发 送 请 求 ， 服 务 端 判断 Last- 





Modified 失 效 则 返回 200， 有 效 则 返回 304。 
4. 如 果 Etag 和 Last-Modified 都 不 存在 ， 则 直接 向 服务 器 请 求 内容 。 
Etag 和 Last-Modified 控 制 请 求 缓存 的 主要 过 





这 就 是 Cache-Control、 


带 If-None-Match 
向 Web 服 务 器 请 求 





判断 是 否 日 “| 带 If-Modified-Since Ee 
Last-Modified 向 Web 服 务 器 请 求 服务 器 决策 





















下 断 是 200 还 是 30 分 






从 缓存 读 取 
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向 Web 服 务 器 请 求 
200 有 更 新 


请 求 啊 应 





304 无 更 新 


从 缓存 读 取 







图 2-5 ”浏览 器 请 求 缓存 判断 过 程 
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部 分 内 容 传 输 优 化 


分 内 容 传 输 优化 指 HTTP 可 以 支持 超 文 本 文件 的 部 分 传输 ， 例 


pe 
部 
部 


如 ， 它 允许 请 求 一 个 文件 的 起 始 位 置 和 一 个 偏 移 长 度 来 进行 文件 内 容 的 





另外 HITP 1.1 请 求 允 许 携 带 一 些 数 据 参 数 信息 一 起 发 送 到 服务 器 ， 
请 求 时 的 数据 信息 可 以 放 在 请 求 头 〈 例 如 ，GET、DELETE 方 法 请 求 
时 ) 或 正文 〈 例 如 ，POST、PUT 方 法 请 求 时 ) 中 。HTTP 请 求 在 消息 的 
正文 中 除了 可 以 携带 文本 内 容 ， 也 可 以 传输 二 进 制 数 据 ， 例 如 表单 中 使 
用 formData 提 交 上 传 文件 时 携带 的 束 是 二 进 制 数据 。 











HITP 报 文 的 头 部 域 信 息 内 容 其 实 有 很 多 ， 每 个 头 部 域 字 段 的 控 
制 都 共有 目 己 的 逻辑 和 判断 机 制 ， 以 下 是 第 见 的 一 些 头 部 域 字 段 的 设 
Ee 


1. Accept: 告诉 Web 服 务 器 自己 能 接收 什么 媒体 类 型 ，*/* 表 示 
能 接收 任何 类 型 ，type/* 表 示 接 收 该 类 型 下 的 所 有 子 类 型 ， 一 般 格式 
为 type/sub-type， 多 个 类 型 使 用 gq 参数 分 割 ，g 的 值 代表 quality 请 求 质 
量 ， 反 映 了 用 户 对 这 类 媒体 类 型 的 偏好 程度 ， 例 如 Accept: text/plain; 
q=0.5, text/html, text/X-dVi; q=0.8, text/x-c。 





2. Accept-Charset: 浏览 器 接收 内 容 的 字符 集 ， 通 常 是 utf-8。 


3. Accept-Encoding: 浏览 器 接收 内 容 的 编码 方法 ， 例 如 指定 是 
否 文 持 压缩 ， 知 文 持 压缩 的 话 文 持 什 么 压缩 方法 ， 有 具体 如 Accept- 
Encoding:gzip, deflate, sdch 。 








4. Accept-Language: 浏览 器 接收 内 容 的 语言 。 语 言 跟 字 符 集 是 
有 区 别 的 ， 例 如 中 文 是 语言 ， 中 文 有 多 种 字符 
集 ，big5、gb2312、gbk 等 。 该 参数 也 可 以 设置 多 个 ， 如 Accept- 








Language: zh-CN,zh;q=0.8。 








5. Accept-Ranges: Web 服 务 器 表明 上 自己 是 否 接受 获取 某 个 实体 
的 一 部 分 《比如 文件 的 一 部 分 ) 请求， 这 里 主要 用 于 部 分 文件 传输 ， 
实际 上 我 们 用 的 比较 少 。bytes 表 示 接 受 传输 多 大 长 度 内 容 ，none 表 示 
不 接受 。 





6. Age: 一 般 当 服务 器 用 自己 缓存 的 实体 去 响应 请 求 时 ， 可 以 用 
该 头 部 表明 实体 从 产生 到 现在 经 过 了 多 长 时 间 ， 如 Age: 3600。 


7. Allow: 该 参数 头 部 可 以 设置 服务 端 文 持 接收 哪些 可 用 的 
HTTP 请 求 方法 ， 例 如 GET、POST、PUT， 如 果 不 支持 ， 则 会 返回 
405(Method Not Allowed)。 


8. Authorization: 当 客 户 并 接收 到 来 自 Web 服 务 絮 的 WWW- 
Authenticate 啊 应 时 ， 后 面 可 以 用 该 头 部 来 携带 上 自己 的 身份 验证 信息 给 
Web 服 务 器 直接 进行 认证 。 





9. Cache-Control: 用 来 声明 服务 器 端 缓存 控制 的 指令 。 包 括 请 
求 设置 指令 和 响应 请 求 指令 。 


请 求 控制 指令 如 下 。 
no-cache: 不 使 用 缓存 实体 ， 要 求 从 Web 服 务 器 去 请 求 内 容 。 


max-age: 只 接受 Age 值 小 于 max-age 值 的 内 容 ， 即 没有 过 期 的 请 
求 对 象 。 


max-stale: 可 以 接受 过 去 的 对 象 ， 但 是 过 期 时 间 必 须 小 于 max- 
stale 值 。 


min-fresh: 接受 生命 期 大 于 其 当前 Age 跟 min-fresh 值 之 和 的 缓存 
对 象 。 


啊 应 控制 指令 如 下 。 


public: 可 以 用 Cache 中 内 容 回应 任何 用 户 。 





private: 只 能 用 绥 存 内 容 回 应 先前 请 求 该 内 容 的 有 具体 用 户 。 


no-cache: 可 以 设置 哪些 内 容 不 被 缓存 。 





max-age: 设置 啊 应 中 包含 对 象 的 过 期 时 间 。 
ALL: no-store 不 允许 缓存。 


10. Connection: 在 请 求 头 中 ，close 告 诉 Web 服 务 器 或 者 代理 服 
务 器 ， 在 完成 本 次 请 求 啊 应 后 断 开 连接 ， 无 须 等 待 本 次 连接 的 后 续 请 
求 ，keep-alive 告 诉 Web 服 务 器 或 者 代理 服务 器 ， 在 完成 本 次 请 求 响应 
后 保持 连接 ， 等 待 本 次 连接 的 后 续 请 求 。 在 啊 应 头 中 ，close 连 接 已 关 
闭 。keep-alive 保 持 连 接 ， 等 待 本 次 连接 的 后 续 请 求 ， 如 果 浏 览 器 请 求 
保持 连接 ， 则 该 头 部 表明 希望 Web 服 务 器 保持 连接 的 时 长 〈 秒 ) ， 例 
如 ，keep-alive: 300。 








11. Content-Encoding: 与 请 求 头 的 Accept-Encoding 对 应 ， 
指 Web 服 务 器 表明 使 用 何 种 压缩 方法 〈gzip，deflate) 压缩 啊 应 中 的 
对 象 ， 例 如 ，Content-Encoding: gzip。 


12. Content-Language: 与 请 求 头 中 的 Accept-Language 对 
应 ，Web 服 务 器 告诉 浏览 器 响应 的 媒体 对 象 语言 。 


13. Content-Length: Web 服 务 器 告诉 浏览 器 HTTP 请 求 内 容 的 长 
度 。 例 如 ，Content-Length: 1024。 





14. Content-Range: Web 服 务 器 表明 该 啊 应 包含 的 部 分 对 象 为 整 
个 对 象 的 哪个 部 分 。 


15. Content-Type: 与 请 求 头 的 Accept 对 应 ， 指 明 Web 服 务 器 告 
诉 浏览 器 啊 应 的 对 象 的 类 型 。 例 如 ，Content-Type: application/xml。 


16. Etag: 对 象 ( 比 如 URL) 的 标志 值 。 一 个 对 象 ( 如 HTML 文 
件 ) 如 果 被 修改 了 ， 其 Etag 也 会 被 修改 ， 所 以 Etag 的 作用 和 Last- 
Modified 差 不 多 ， 主 要 供 Web 服 务 器 判断 一 个 对 象 是 否 改变 。 例 如 前 
一 次 请 求 某 个 HTML 文 件 时 获得 了 其 Etag， 当 这 次 又 请 求 该 文件 时 ， 
浏览 器 束 会 把 先前 获得 的 Etag 值 发 送 给 Web 服 务 器 ， 然 后 Web 服 务 器 
会 将 这 个 Etag 值 跟 该 文件 当前 的 Etag 值 进行 对 比 ， 判 断 文件 是 否 改 
A 





17. Expires: Web 服 务 器 表明 该 实体 将 在 什么 时 候 过 期 ， 对 于 过 
期 的 对 象 ， 只 有 在 跟 Web 服 务 器 验证 了 其 有 效 性 后 ， 才 能 用 来 响应 客 
户 请 求 ， 是 HITP/1.0 的 头 部 。 例 如 ，Expires: Sat， 23 May 2009 
10:02:12 GMT。 


18. Host: 客户 端 指定 目 己 访 问 的 Web 服 务 器 的 域名 /IP 地 址 和 端 


口号 。 例 如 ，Host:， www.jixiangianduan.com。 


19. If-None-Match: 如 果 上 次 文件 返回 头 中 包含 Etag 信 息 ， 则 会 
带 上 IfNone-Match “发送 请 求 给 服务 器 ， 判 断 请求 返 回 304 还 是 200。 
例如 ，If-None-Match: W/"34blc4d4f5d8c61:d23"。 


20. If-Modified-Since: 如 果 上 次 文件 返回 头 中 包含 了 Last- 
Modified 信 息 ， 则 会 带 上 If-Modified-Since 发 送 请 求 给 服务 器 ， 判 断 请 
求 返 回 304 还 是 200。 例 如 ，If-Modified-Since: Thu， 10 Apr 216 
09:14:42 GMT。 


21. If-Range: 浏览 器 告诉 Web 服 务 器 ， 如 果 请 求 的 对 象 没 有 改 
变 ， 就 把 修改 的 部 分 返回 给 浏览 器 ， 如 果 对 象 改 变 了 ， 就 把 整个 对 象 
返回 给 浏览 器 。 浏 览 器 通过 发 送 请 求 对 象 的 Etag 或 者 自己 所 知道 的 最 
后 修改 时 间 给 Web 服 务 器 ， 让 其 判断 对 象 是 否 改 变 。If-Range 常 常 跟 
Range 头 部 一 起 使 用 。 








22. Last-Modified: Web 服 务 堪 设置 的 对 象 最 后 修改 时 间 ， 比 如 
文件 的 最 后 修改 时 间或 者 动态 页 面 的 最 后 产生 时 间 。 例 如 Last- 
Modified: Tue, 06 Sep 2016 02:42:43 GMTI。 





23. Location: Web 服 务 器 告诉 浏览 器 ， 试 图 访问 的 对 象 已 经 被 
移 到 别 的 位 置 了 ， 让 浏览 器 重 定 问 去 读 取 Location 里 面 返回 的 内 容 。 


24. Pramga: 主要 使 用 Pramga: no-cache， 相 当 于 Cache-Control: 


no-cache。 例 如 ，Pragma: no-cache。 
25. Proxy-Authenticate: 代理 服务 器 啊 应 浏览 器 ， 要 求 其 提供 代 


理 身份 验证 信息 。Proxy-Authorization: 浏览 器 响应 代理 服务 器 的 身 
份 验 证 请 求 ， 提 供 目 己 的 身份 信息 。 





26. Range: 浏览 器 告诉 Web 服 务 器 上 自己 想 读 取 对 象 的 哪 部 分 。 





27. Referer: 浏览 右 癌 Web 服 务 器 表明 上 自己 是 从 哪个 网 页 UREL 路 
转 访 问 当 前 请 求 中 网 址 URL 的 ， 即 跳 转 到 当前 页 面 的 来 源 。 例 如 ， 


Referer: http:/www.jixiangianduan.com/。 





28. Server: Web 服 务 器 通过 此 头 域 表明 上 自己 是 什么 软件 及 版 本 
信息 。 例 如 ，Server: Apache/2.2.18 (Unix)。 





29. User-Agent: 浏览 器 的 代理 名 称 ， 位 于 请 求 涉 部， 通常 服务 
端 可 以 根据 这 个 设置 获取 浏览 器 的 种 类 和 版 本 信息 。 例 如 ， 
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/ 537.36 (KHTM™L, 
like Gecko) Chrome/53.0.2785.143 Safari/537.36。 


30. Transfer-Encoding: Web 服 务 器 表明 自己 对 本 啊 应 传输 消息 
体 做 怎样 的 编码 ， 如 是 否 分 块 〈chunked) ，Transfer-Encoding: 
chunked。 


参考 资料 : https:/datatracker.ietf.org/doc/rfc2616/? 


include text=1。 


2.1.3 HIIP2 


HTTP 2 即 超 文 本 传输 协议 2.0 版 本 ， 是 HTTP 协 议 的 下 一 个 版 本 。 为 
了 更 好 地 了 解 HITP 2， 我 们 先 来 了 解 一 下 SPDY 协 议 。SPDY 是 一 种 基 
于 HTTP 的 兼容 协议 ， 由 Google 发 起 ，Chrome、Opera、Firefox 等 较 新 的 
浏览 器 已 提供 该 协议 支持 。SPDY 传 输 支 持 多 路 复 用 和 服务 器 推送 技 
术 ， 压 缩 了 HTTP 头 部 减 小 了 请 求 大 小 ， 并 强制 使 用 SSL 传 输 协议 ， 到 
目前 为 止 已 经 成 为 了 一 套 成 熟 的 高 效 协 议 标 准 。 但 由 于 SPDY 必 须 使 用 
HTTPS 协 议 ， 所 以 之 前 HTTP 的 网 站 就 无 法 直接 使 用 SPDY， 因 此 最 终 





HTTP Working-Group 决 定 以 SPDY 2 版 本 协议 规范 为 基础 ， 开 发 HTTP 2 
协议 ， 能 将 文件 内 容 在 网 络 中 进行 高 效 传输 ， 同 时 希望 使 用 HPACK 算 
法 (为 HTTP 2 头 压 缩 专门 设计 的 算法 ) 来 压缩 协议 的 消息 头 。 最 终 形 
成 了 目前 广为人知 并 且 极 具 优势 的 下 一 代 超 文本 传输 协议 HITP 2。 


HTTP 2 相对 于 之 前 的 HTTP 协 议 有 以 下 几 个 优点 。 


o HTTP 2 采用 完全 二 进 制 的 格式 来 传输 数据 ， 而 非 HITP 1.x 的 默 
认 文 本 格式 。 而 二 进 制 在 网 络 中 传输 的 基本 单位 一 般 为 帧 
CEFrame， 一 个 帧 可 以 理解 为 具有 固定 格式 和 长 度 的 二 进 制 数 
据 包 ) ， 每 个 帧 包含 几 个 固定 部 分 内 容 : 类 型 Type、 长 度 
Length、 标 记 Flags、 流 标识 Stream 和 Frame payload 〈 帧 有 效 载 
人 向， 一 帧 能 携带 的 内 容 数据 长 度 ) 。 多 个 帧 的 传输 在 网 络 中 就 
形成 了 帧 的 传输 网 络 流 ， 所 以 我 们 也 可 以 理解 为 HTTP ”2 协议 
是 通过 流 式 传输 的 。 同 时 HTTP 2 对 消息 头 采用 HPACK 压 缩 伟 
输 ， 最 大 限度 地 节省 了 传输 带宽 。 相 比 于 HITP 1.x 每 次 请 求 都 
会 携带 大 量 见 余 头 信息 (例如 浏览 器 Cookie 信 息 等 ; ，HTTP 2 
就 具有 很 大 的 优势 了 。 





o HITP 2 使 用 TCP 多 路 复 用 的 方式 来 降低 网 络 请 求 连接 建立 和 关 
闭 的 开销 ， 多 个 请 求 可 以 通过 一 个 TCP 连 接 来 并 发 完成 。 
HTTP ” 1.1 虽然 也 可 通过 PipeLine 实 现 并 发 请 求 ， 但 是 PipeLine 
是 通过 串 行 传输 的 ， 多 个 请 求 之 间 的 响应 可 能 会 被 阻塞 。 


这 里 我 们 有 必要 明确 一 下 TCP 连 接 复 用 和 HTTP 1.1 中 keep-alive 连 
接 复 用 的 区 别 : TCP 复 用 传输 是 发 生 在 传输 层 的 ， 而 keep-alive 控 制 的 
文件 的 连接 复 用 是 在 应 用 层 的 ，keep-alive 的 连接 复 用 是 串 行 的 ， 即 一 








个 文件 传输 完 后 ， 下 个 文件 才能 复 用 这 个 连接 ， 而 TCP 复 用 是 帧 的 多 
路 复 用 ， 即 不 同文 件 的 传输 帧 可 以 在 一 个 TCP 连 接 中 一 起 同时 进行 流 
式 传输 。 


o HTTP 2 支持 传输 流 的 优先 级 和 流量 控制 机 制 。HTTP 2 中 每 个 文 
件 传 输 流 都 有 自己 的 传输 优先 级 ， 并 可 以 通过 服务 器 来 动态 改 
变 ， 服 务 器 会 保证 优先 级 高 的 文件 流 先 传 输 。 例 如 在 未 来 的 浏 
览 吉 端 泻 染 中 ， 服 务 器 端 就 可 以 优先 传输 CSS 文 件 保 证 页 面 的 
泻 染 ， 然 后 在 CSS 文 件 全 部 传输 完成 后 加 载 JavaScript 脚 本 文 
件 。 其 实 这 就 和 我 们 现在 前 端 一 些 优化 规则 有 点 相 背 离 ， 例 如 
使 用 HTTP 2 的 情况 下 CSS 文 件 就 不 一 定 要 写 在 HTML 的 顶部 ， 
JavaScript 也 不 一 定 要 在 HTML 最 底部 写 了 ， 因 为 HTTP ”2 的 服 
务 器 自动 就 能 帮 你 做 这 件 事情 。 


o 文 持 服务 器 端 推送 。 服 务 端 能 够 在 特定 条 件 下 把 资源 主动 推送 
给 客户 端 。 就 像 浏览 器 端的 资源 预 加 载 一 样 ， 例 如 资源 推送 可 
以 在 HTML 文档 下 载 之 前 让 HTML 的 JavaScript 或 CSS 文 件 先进 
行 下 载 ， 从 而 大 大 缩短 页 面 加 载 泻 染 的 等 待 时 间 。 


所 以 基于 这 些 HITP 2 的 优势 特性 ， 有 人 提出 : 如 果 推 广 HITTP 2， 
原 有 网 站 的 一 些 优化 规则 将 不 再 适用 。 其 实 两 者 也 不 完全 是 矛盾 的 。 一 
方面 ， 使 用 HITP ”2 会 极 大 程度 上 提高 网 络 的 传输 效率 ， 让 我 们 可 以 更 
少 地 关注 页 面 的 性 能 优化 ， 是 对 现在 开发 优化 手段 的 一 个 增强 。 另 一 方 
面 ， 现 有 的 优化 规则 依然 能 对 前 端 资 源 的 加 载 和 执行 起 到 进一步 优化 的 
人 作用。 同时， 我 们 也 必须 要 了 解 ，HTTP “2 和 我 们 还 有 相当 一 段 距离 ， 
目前 支持 HTTP 2 协议 传输 的 浏览 器 依然 很 少 ， 至 少 需要 达到 EDGE 13、 


Chrome 45 或 Safarit ”9.2 以 上 版 本 。 随 着 技术 的 发 展 和 浏览 器 的 更 新 迭 
代 ，HTTP 2 的 时 代 终 会 到 来 ， 但 我 们 依然 不 能 在 短 时 间 内 企图 通过 它 
来 帮 我 们 进行 页 面 优化 。 


2.2 web 安全 机 制 


Web 前 闪 安 全 方面 涵盖 的 内 容 较 多 ， 也 是 前 端 项 目 开 发 中 必须 要 关 
注 的 一 个 重要 部 分 。 在 Web 站 点 开发 中 ， 如 果 没 有 很 好 的 安全 防护 措 
施 ， 不 仅 可 能 因为 攻击 者 的 恶意 行为 影响 站 氮 页 面 功 能 、 汇 露 用 户 授权 
隐私 ， 甚 至 还 可 能 会 直接 带 来 用 户 经 济 上 的 损失 。 尺 管 如 此 ， 我 们 现在 
依然 会 找到 大 量 含 有 Web 端 安全 漏洞 的 页 面 ， 那 么 这 一 节 我 们 就 来 理 一 
理 与 Web 前 端 安全 方面 相关 的 问题 。 

















2.2.1 基础 安全 知识 


XSS (Cross Site Script， 跨 站 脚本 攻击 ) 、SQL (Structured Query 
Language， 结 构 化 查询 语言 ) 注入 和 CSRF (Cross-site Request 
Forgery， 跨 站 请 求 伪 造 ) 均 属 于 基础 的 前 端 安全 知识 ， 逐 个 来 看 一 下 。 





XSS 


XSS 通 常 是 由 带 有 页 面 可 解析 内 容 的 数据 未 经 处 理 直 接 插入 到 页 面 
上 解析 导致 的 。 需 要 注意 的 是 ，XSS 分 为 存储 型 XSS、 反 射 型 XSS、 
MXSS (也 叫 DOM XSS) 三 种 。 这 里 区 分 不 同类 型 主要 是 根据 攻击 脚本 
的 引入 位 置 存储 型 XSS 的 攻击 脚本 常常 是 由 前 端 提 交 的 数据 未 经 处 理 
直接 存储 到 数据 库 然后 从 数据 库 中 读 取 出 来 后 又 直接 插入 到 页 面 中 所 导 
致 的 ， 反 射 型 XSS 可 能 是 在 网 页 URL 参 数 中 注入 了 可 解析 内 容 的 数据 而 














导致 的 ， 如 果 直 接 获取 URL 中 不 合法 的 并 插入 页 面 中 则 可 能 出 现 页 面 上 
的 XSS 攻 击 ，MXSS 则 是 在 泻 染 DOM 属 性 时 将 攻击 脚本 插入 DOM 属 性 
中 被 解析 而 导致 的 。XSS 主 要 的 防范 方法 是 验证 输入 到 页 面 上 所 有 内 容 
来 源 数据 是 否 安全 ， 如 果 可 能 含有 脚本 标签 等 内 容 则 需要 进行 必要 的 转 
义 。 具 体 看 下 面 几 个 例子 。 





<!-- 存储 型 XSS， 后 台 从 数据 库 中 读 取 数据 返回 并 在 前 端 页 面 模板 中 直接 浓 染 导致 存 信 
是 我 们 要 泻 染 的 内 容 模 板 - -> 


<div>{{ content }}</div> 





<!-- 泻 染 后 输出 内 容 为 - -> 


<div><script>alert();</script></div> 














<!-- MXSS， 页 面 标签 元 素 属 性 在 前 端 泻 染 时 含有 可 解析 的 标签 导致 ， 下 面 是 要 演 染 的 民 
<p calss="class-a {{b}}"></p> 

















<!-- 插入 恶意 脚本 内 容 的 输出 结果 - -> 


<p calss="class-a "><script>alert()</script><p class="class-b"></ 


// 反射 型 XSS， 例如 Node 服务 器 端 泻 染 数 据 ，wWeb 服务 器 脚本 从 前 端 URL 中 获取 
// 反射 型 XSS 

let name = req.query['name']; 

this.body = “<div>${name}</div> ，; 

// 如 果 url 里 传递 的 name 参数 值 为 '<script>alert();</script>'， 则 输出 > 
</script></div>， 会 导致 页 面 上 的 XSS 








常见 的 XSS 场 景 主要 包含 下 面 这 些 ， 基 于 这 些 基 本 有 的 场景 ， 可 以 有 





更 多 不 同 的 情况 出 现 。 所 以 针对 这 些 问题 ， 我 们 需要 做 好 数据 的 校 验 工 
作 ， 一 般 的 做 法 是 将 所 有 可 能 包含 攻击 的 内 容 进行 HTML 字符 编码 转 
义 ， 目 前 的 HTML 字 符 编 码 解码 就 可 以 如 下 实现 。 


// HTML 字符 转译 编码 

function htmlEncode(str) { 
let s= "''; 
if (str.length == 0) return '',; 
s = str.replace(/&/g, '&amp;'); 
s = s.replace(/</g, '&lt;'); 
s = s.replace(/>/g, '&gt;'); 
s = s.replace(/ /g, '&nbsp;'); 
s = s.replace(/\'/g, '&#39;'); 
s = s.replace(/\"/g, '&quot,;'); 
s = s.replace(/\n/g, '<br>'); 


return s; 





// HTML 字符 转译 解码 

function htmlDecode(str) { 

let S = "''; 
if (str.length == 0) return ''; 
s = str.replace(/&amp;/g, '&'); 
s = s.replace(/&lt;/g, '<'); 
s = s.replace(/&gt;/g, '>'); 
s = s.replace(/&nbsp;/g, ' '); 
s = s.replace(/&#39;/g, '\''); 


S = s.replace(/&quot;/g, '\"'); 
S = s.replace(/<br>/g, '\n'); 


return s; 








这 样 ，script 等 内 容 的 标签 符号 就 会 直接 在 页 面 中 显示 ， 而 不 是 被 
浏览 器 解析 成 script 的 DOM 节 点 来 执行 了 。 


<div>{{ htmlEncode(content) }}</div> 











<!- - 特殊 字符 转 义 后 ， 只 显示 在 页 面 上 ， 不 会 被 解析 - -> 


<script>alert();</script> 


SQL 注入 攻击 





SQL 注入 攻击 主要 是 因为 页 面 提交 数据 到 服务 器 端 后 ， 在 服务 器 端 
人 0 因此 产生 执行 与 
预期 不 同 的 现象 。 主 要 防范 措施 是 对 前 端 网 页 提 区 的 数据 内 容 进行 严格 
的 检查 校 验 。 


let id = req.query['id']; 


let Sql = Select * from user_table where id=${id}，; 


let data = exec(sql); 
this.body = data; 


例如 以 上 实例 ， 如 果 前 端 传 入 的 id 内 容 为 "100 or name=%user%"， 
那么 查询 出 来 的 结果 就 不 只 是 id=100 的 用 户 了 ， 包 含 user 字 符 用 户 名 的 


用 户 内 容 也 都 会 被 查询 出 来 ， 并 且 这 些 用 户 信 息 都 可 能 被 输出 ， 导 致 
SQL 注 入 的 发 生 。 所 以 这 时 我 们 需要 对 传 入 的 id 内 容 进 行 检验 ， 检 查 是 
人 否 包 含 非法 内 容 。 





CSRF 


CSRF 是 指 非 源 站 点 按照 源 站 点 的 数据 请 求 格 式 提 交 非 法 数据 给 源 
站 点 服务 器 的 一 种 攻击 方法 。 非 源 站 点 在 取 到 用 户 登录 验证 信息 的 情况 
下， 可 以 直接 对 源 站 点 的 人 条 个 数据 接口 进行 提交 ， 如 果 源 站 反对 该 提交 
请 求 的 数据 来 源 未 经 验证 ， 该 请 求 可 能 被 成 功 执 行 ， 这 其 实 并 不 合理 。 
通常 比较 安全 的 是 通过 页 面 Token〈 令 牌 ) 提交 验证 的 方式 来 验证 请 求 
古 否 为 源 站 点 页 面 提交 的 ， 来 阻止 跨 站 伪 请 求 的 发 生 。 














如 图 2-6 所 示 ， 用 户 通 过 源 站 扣 页 面 可 以 正常 访问 源 站 点 服务 句 接 
口 ， 但 是 也 有 可 能 被 钓鱼 进入 伪 站 点 来 访问 源 服 务 器 ， 如 果 伪 站 点 通过 
第 三 方 或 用 户 信息 拼 接 等 方式 获取 到 了 用 户 的 信息 ， 直 接 访 问 源 站 扣 的 
服务 器 接口 进行 关键 性 操作 (例如 支付 扣 球 或 返回 用 户 隐私 信息 等 操 
作 ) ， 此 时 如 宋 源 站 点 服务 器 未 做 校 验 防护 ， 伪 站 点 的 请 求 操作 就 可 以 
被 成 功 执 行 。 男 一 种 情况 则 可 能 是 盗 刷 源 站 点 的 登录 等 接口 来 暴力 破解 
用 户 密 码 的 情况 ， 如 果 源 站 点 不 添加 防护 措施 ， 用 户 信息 就 极 可 能 家 盗 
取 ， 所 以 我 们 需要 进行 安全 性 验证 。 




















正常 提交 








正常 访问 
获取 上 月 三 1 认证 百 ， 恩 


非法 提交 
| 钓鱼 访问 
| 伪 庆 点 页 面 非法 盗 刷 用 上 


终端 用 户 非法 盗 刷 用 户 信 息 





信 息 盗 刷 服 及 务 

















图 2-6 ”CSRF 攻 击 原 理 





如 图 2-7 所 示 ， 我 们 在 源 站 点 服务 请 求 调用 时 添加 了 对 源 站 点 的 验 
证 ， 使 用 服务 器 端 实时 返回 加 密 的 验证 Token 给 源 站 点 页 面 ， 在 源 站 点 
页 面 提交 时 将 Token 一 起 带 给 服务 器 验证 ， 而 Token 是 不 会 被 其 他 伪 站 点 
利用 的 。 而 非法 的 伪 站 点 和 盗 刷 的 行为 就 可 以 被 直接 拒绝 挤 ， 这 样 就 大 
大 降低 了 CSRF 发 生 的 概率 。 所 以 在 Web 后 端 ， 我 们 常常 会 进行 Token 的 
验证 ， 其 中 一 种 形式 是 将 页 面 提交 到 后 台 的 验证 Token 与 session 临 时 保 
存 的 Token 进 行 比 较 就 可 以 来 实现 了 。 


// 生成 随机 的 csrf 验证 Token， 并 返回 给 前 端 页 面 
this.session.csrf = md5(Math.random(©0, 1).toSstring()).slice(5, 15 





this.body = yield render('user/login', { 
csrf: ctx.session.csrf 


}); 





// 提交 时 验证 Token 是 否 与 源 站 的 Token 相同 
let csrf = this.request.body['csrf"']; 
if (csrf !== this.session.csrf) { 
res = { 
code: 403, 
msg: ' 不 明 网 站 来 源 提交 ' 
} else { 


// 正常 提交 后 的 处 理 逻 辑 











I 返回 验证 Token 


带 Token 提 交 源 站 点 服务 器 








正常 访问 


获取 用 户 认证 信息 
验证 失败 


钓鱼 访问 


终端 用 户 验证 失败 





信息 盗 刷 服务 





图 2-7 CSRF 预 防 机 制 








目前 解决 CSRF 的 最 佳 方式 就 是 通过 加 密 计算 的 Token 验 证 ， 


而 Token 除 了 通过 session 也 可 以 使 用 HITP 请 求 头 中 Authorization 的 特 
定 认证 字段 来 传递 。 当 然 并 不 是 说 使 用 了 Token， 网 站 调用 服务 就 安 
全 了 ， 单 纯 的 Token 验 证 防止 CSRF 的 方式 理论 上 也 是 可 以 被 破解 的 ， 
例如 可 以 通过 域名 伪造 和 拉 取 源 站 实时 Token 信 息 的 方式 来 进行 提 
交 。 另 外 ， 任 何 所 谓 的 安全 都 是 相对 的 ， 只 是 说 理论 的 破解 时 间 变 长 
了 ， 而 不 容易 被 攻击 。 很 多 时 候 要 使 用 多 种 方法 结合 的 方式 来 一 起 增 
加 网 站 的 安全 性 ， 可 以 结合 验证 码 等 手段 大 大 减少 盗 刷 网 站 用 户 信 息 
的 频率 等 ， 进 一 步 增强 网 站 内 容 的 安全 性 。 











2.2.2 ”请 求 动 持 与 HTTPS 


现在 除了 下 第 的 前 后 并 脚本 安全 问题 ， 网 络 请 求 支持 的 发 生 也 越 来 
越 频 紧 。 网 络 动 持 一 般 指 网 站 资源 请 求 在 请 求 过 程 中 因为 人 为 的 攻击 叶 
致 没有 加 载 到 预期 的 资源 内 容 。 网 络 请 求 劫持 目前 主要 分 为 两 种 : DNS 
劫持 与 HTTP 劫持 。 下 面具 体 看 看 两 种 方式 各 是 什么 样 的 。 





DNS 劫持 


DNS 劫持 通常 是 指 攻击 者 劫持 了 DNS 服务 器 ， 通 过 某 些 手段 取得 某 
域名 的 解析 记录 控制 权 ， 进 而 修改 此 域名 的 解析 结果 ， 导 致 用 户 对 该 域 
名 地 址 的 访问 由 原 人 P 地 址 转 入 到 修改 后 的 指定 P 地 址 的 现象 ， 其 结果 就 
古 让 正确 的 网 址 不 能 解析 或 被 解析 指向 妨 一 网 站 IP， 实 现 获取 用 户 资 料 
或 者 破坏 原 有 网 站 正常 服务 的 目的 。DNS 动 持 一 般 通 过 算 改 DNS 服 务 器 
上 的 域名 解析 记录 ， 来 返回 给 用 户 一 个 错误 的 DNS 得 询 结果 实现 。 











如 图 2-8 所 示 ，DNS 劫 持 症 状 可 能 为 在 某 些 地 区 的 用 户 在 成 功 连接 
宽带 网 络 后 ， 访 问 域名 为 www.a.com 的 网 站 ， 出 现 的 却 是 www.b.com 网 
站 的 内 容 ， 因 为 DNS 服务 器 www.a.com 域 名 的 解析 结果 被 修改 指向 了 
www.b.com 网 站 指 问 的 IP 地 址 。 


www. a. com 10. 0. 0. 
www. b. com 10. 0. 0. 
被 算 改 成 : 

www. a. com 10. 0. 0. 2 
www. b. Com 10. 0. 0.2 





DNS 服务 器 
DNS 解析 





预期 访问 10. 0.0.1 


实际 访问 10. 0. 0.2 





www. b. com Web 服务 器 


图 2-8 DNS 劫持 原理 


HTTP 动 持 


HTTP 劫 持 是 指 ， 在 用 户 浏览 喜与 访问 的 目的 服务 器 之 间 所 建立 的 
网 络 数据 传输 通道 中 从 网 关 或 防火 墙 层 上 监视 特定 数据 信息 ， 当 满足 一 
定 的 条 件 时 ， 惑 会 在 正常 的 数据 包 中 插入 或 修改 成 为 攻击 者 设计 的 网 络 
数据 包 ， 目 的 是 让 用 户 浏览 费解 释 “ 错 误 * 的 数据 ， 或 者 以 弹出 新 窗口 的 








形式 在 使 用 者 浏览 器 界面 上 展示 宣传 性 广告 或 者 直接 显示 某 块 其 他 的 内 


FRR 


容 。 








如 图 2-9 所 示 ， 这 种 情况 下 一 般 用 户 请 求 源 网 站 的 IP 地 址 及 网 站 加 
载 的 内 容 和 脚本 都 是 正确 的 ， 但 是 在 网 站 内 容 请 求 返回 的 过 程 中 ， 可 能 
被 ISP (Internet Service Provider， 互 联网 服务 提供 商 ) 劫持 修改 ， 最 终 
在 浏览 器 页 面 上 添加 显示 一 些 广告 等 内 容 信 息 。 





对 于 这 些 情况 ， 网 站 开发 者 常常 就 无 法 明 过 修改 网 站 代码 程序 等 手 
段 来 进行 防范 了 。 请 求 动 持 唯一 可 行 的 预防 方法 就 是 尽量 使 用 HTTPS 协 
议 来 访问 目标 网 站 。 








DNS 解 析 





数据 内 容 请 求 2 
www. a. com Web 服务器 
经 过 运营 两 网 络 


数据 被 修改 


ISP 提 供 商 


图 2-9_ HTTP 请求 支持 原理 























2.2.3 HTTPS 协 议 通 信 过 程 


HTTPS 协 议 是 通过 加 入 SSL (Secure Sockets Layer) 层 来 加 密 HITP 
数据 进行 安全 传输 的 HITP 协 议 ， 同 时 局 用 默认 的 443 端 口 进 行 数据 传 
输 。 那 么 使 用 HTTPS 是 怎样 保证 浏览 器 和 服务 器 之 间 数 据 安全 传输 的 
呢 ? 我 们 需要 先 理解 两 个 概念 : 公 钥 和 私 钥 。 


公 钥 (Public Key) 与 私 钥 (Private Key) 是 通过 一 种 加 密 算 法 得 
到 的 密 钥 对 〔 即 一 个 公 和 钥 和 一 个 与 之 匹配 的 私 钥 〉， 密 钥 对 中 公 
开 的 部 分 ， 私 钥 则 是 非 公 开 的 部 分 。 公 钥 通 常用 于 会 话 加 密 、 验 证 数字 
签名 或 者 加 密 可 以 用 相应 私 钥 解密 的 数据 。 通 过 这 种 算法 得 到 的 密 钥 对 
保证 是 唯一 的 。 使 用 这 个 密 钥 对 的 时 候 ， 如 果 用 其 中 一 个 密 钥 加 密 一 段 
ee 则 必须 用 另 一 个 密 钥 解密 。 比 如 用 公 钥 加 密 数 据 束 必须 用 私 钥 解 

， 如 果 用 私 钥 加 和 密 也 必须 用 公 钥 解密 ， 否 则 解密 将 不 会 成 功 。 我 们 以 
公 钥 加 密 方式 为 例 来 看 看 HTTPS 进 行 消息 安全 通 利信 的 整个 过 程 。 





如 图 2-10 所 示 ， 客 户 端 在 需要 使 用 HTTPS 请 求 数据 时 ， 首 先 会 发 起 
连接 请 求 ， 告 诉 服务 器 将 建立 HTTPS 连 接 ;， 服 务 器 收 到 通知 后 自己 生成 
一 个 公 钥 并 将 它 返 回 给 客户 端 ， 如 果 是 第 一 次 请 求 ， 同 时 还 要 告诉 客户 
端 需 要 进行 连接 验证 ， 如 果 需 要 验证 ， 客 户 端 接收 到 服务 器 公 钥 后 开始 
发 送 验 证 请 求 ， 将 一 个 特定 的 验证 串 使 用 服务 器 返回 的 公 钥 加 密 后 形成 
密 文 发 送 给 服务 器 ， 同 时 客户 端 也 将 自己 生成 的 公 钥 发 送 给 服务 器 ; 服 
务 器 获取 到 加 密 的 报 文 和 客户 端 公 钥 ， 先 使 用 服务 器 私 钥 解 密 报 文 获得 
验证 串 ， 然 后 将 验证 串通 过 接收 到 的 客户 端 公 钥 加 密 后 返回 给 客户 端 ; 
客户 端 再 通过 私 钥 解密 验证 串 ， 判 断 是 否 为 自己 开始 发 送 的 验证 串 ;， 如 
果 正 确 ， 说 明 双 方 的 连接 是 安全 的 ， 连 接 验 证 成 功 ， 客 户 端 开 始 将 后 面 
的 数据 通过 服务 器 初始 返回 的 公 钥 不 断 加 密 发 送 给 服务 器 ， 服 务 器 也 不 

















断 解 密 获取 报 文 ， 并 通过 客户 端 公 钥 加 密 啊 应 的 报 文 内 容 返 回 给 客户 端 
验证 。 这 样 就 建立 了 HTTPS 双 向 的 加 密 传 输 连 接 。 
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图 2-10 HTTPS 通 信 建 立 过 程 


在 这 种 情况 下 ， 传 输 层 传输 的 内 容 不 会 以 明文 的 方式 显示 ， 而 且 
HTTPS 的 请 求 只 能 被 添加 了 对 应 数字 证 书 的 应 用 层 代 理 拦截 ， 因 此 第 三 
方 攻击 者 就 无 计 可 施 了 。 通 常 我 们 要 创建 HITPS 服 务 ， 在 服务 端 可 以 使 
用 对 应 的 模块 来 实现 ， 例 如 在 Node 端 就 可 以 用 以 下 方法 来 实现 。 





// 引入 https 模块 
const httpsModule = require('https"'); 


const fs = require('fs'); 





// 加 载 网 站 https 服务 证 书 文件 ， 证 书 一 般 需 要 注册 申请 
const https = httpsModule.Server({ 














key: fs.readFileSync('/path/to/server.key'), 

cert: fs.readFileSsync('/path/to/server.crt') 
}, function(req, res)t{ 

res.writeHead(200); 

res.end("hello world\n"); 


}); 





// https 默认 监听 端口 443 

https.1listen(443, function(err)t{ 
console.1log("https listening on port: 443"); 

}); 


当然 ， 如 果 使 用 Web 框 架 ， 也 可 以 通过 更 简单 的 方式 创建 一 个 
HTTPS 服 务 器 。 


const koa = require('koa'); 


const app = koal(); 


// 同时 监听 多 个 端口 
app.1listen(80); 
app.listen(443); 


2.2.4 HTTPS 协 议 解 析 


那么 ，HTTPS 通 信和 HTTP 通 信 方 式 有 什么 不 同 呢 ? 接 下 来 我 们 具 
体 看 看 HTTPS 通 信 的 内 容 ， 我 们 以 打开 https: Wgithub.com/ouvens 页 面 内 
容 的 过 程 为 例 ， 来 理解 HITPS 请 求 消息 的 一 些 关键 性 结构 。 


Request URL:https://github.com/ouvens 
Request Method:GET 

Status Code:200 OK (from cache) 
Remote Address:192.30.252.131:443 


Request Headers 


图 2-11 所 示 为 HTTPS 的 请 求 头 部 内 容 ， 图 2-12 所 示 为 HTTPS 的 啊 应 
头 部 内 容 。 从 图 中 可 以 看 出 ，HTTPS 请 求 报 文 和 HTTP 的 请 求 报 文 区 别 
不 大 ， 但 是 在 请 求 的 头 部 域 字 段 多 了 upgrade-insecure-requests， 该 头 部 
字段 指令 很 关键 ， 它 可 以 用 于 让 页 面 打 开 的 后 续 请 求 自 动 从 HTTP 请 求 
升级 到 HTTPS 请 求 。 否 则 如 果 使 用 HTTPS 来 加 载 HIML 文 件 ， 而 HIML 
中 加 载 的 是 HITP 链 接 的 资源 文件 ， 则 会 产生 Mixed 。” Content 类 型 的 错 
误 ， 并 且 无 法 加 载 资源 。 考 虑 到 这 个 问题 ，W3C 在 2015 年 4 月 出 台 了 一 
个 Upgrade Insecure Requests 的 草案 ， 作 用 就 是 让 浏览 器 目 动 升级 后 面 请 
求 为 HTTPS 请 求 。 同 时 我 们 在 服务 器 册 啊 应 头 域 中 也 要 加 入 下 面 的 头 域 
来 返回 给 浏览 器 ， 否 则 浏览 器 默认 安全 显示 策略 会 阻塞 内 容 并 提示 
block-all-mixed-content 类 型 的 错误 。 





header ("Content-Security-Policy: upgrade-insecure-requests") 


Accept: text/htm],application/xhtml+xml,application/xml;q=8.9,image/webp,*/*;q=0.8 


Accept-Encoding: gzip, deflate, sdch 

Accept-Language: zh-CN,zh;q=8.8 

Cache-Control: max-age=08 

Connection: keep-alive 

Cookie: octo=GH1.1.1139198484.1452477482; logged in=yes; dotcom user=ouvens; gh sess=ey]J]sYXN8X 
3dyaXR1lIjoxNDUAMDk2NjUSMDY3LCJzZXNzaW9uX21kIjoiYzQ8O0Td1MWQ2ZDM3MmUyMzhmNT11MWI1NDc1Y2Ix0DgifQ%3 
D%3D--d325338462324fd3f46bc163355b644ad4cc9196; user_session=aeWkxGgL3sAnsCvHpTD3B1t2_63jk-Pc2L 
Je-9euRmakOXPfVujKGcnU@cMothpSrKH_sCjMvlznKjS-; _ga=GAl.2.261276238.1452477482; tz=Asia%2FShang 
hai 

Host: github.com 

Referer: https://github.com/ 

Upgrade-Insecure-Requests: 1 

User-Agent: Mozilla/5.8 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHIML, like Gecko) Chrome/4 

9.9.2623.87 Safari/537.36 





图 2-11 HTTPS 请 求 头 部 内 容 


Content-Security-Policy: default-src *; base-uri “self'; block-all-mixed-content; child-src 'self’ 
render.githubusercontent.com; connect-src ‘self' uploads.github.com status.github.com api.githu 
b.com www.google-analytics.com github-cloud.s3.amazonaws.com wss://live.github.com; font-src as 
sets-cdn.github.com; form-action “self”github .com gist.github.com; frame-src 'self' render.git 
hubusercontent.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google 
-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com; media-s 
rc 'none'; object-src assets-cdn.github.com; plugin-types application/x-shockwave-flash; script 
-src assets-cdn.github.com; style-src 'self' ‘unsafe-inline' assets-cdn.github.com 
Content-Type: text/html; charset=utf-8 

Date: Wed, 16 Mar 2616 63:24:32 GMT 

Public-Key-Pins: max-age=380; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-sha2 
56=" JbQbUGSJMJUoI6brnx@x3vZF6jilxsapbXGVfjhN8Fg="; includeSubDomains 

Server: GitHub.com 

Set-Cookie: user session=aeWkxGgL3sAnsCvHpTD3B1t2 63jk-Pc2LJe-9euRmakOXPfVujR8I9maqWelLzpMDPCt1w8| 
Vdv2FQOt; path=/; expires=Wed, 30 Mar 2016 63:24:32 -8880; secure; HttpOnly 

Status: 200 OK 

Strict-Transport-Security: max-age=31536606; includeSubdomains; preload 

Transfer-Encoding: chunked 

Vary: X-PJAX 

Vary: Accept-Encoding 

X-Content-Type-Options: nosniff 

X-Frame-Options: deny 

X-GitHub-Request-ld: 67871C87:688C:361C974:56E8D1EF 

X-GitHub-Session-ld: 95501858 

X-GitHub-User: ouvens 

X-Request-ld: 14ee4ec4fc933b11d957c1233e17edc4 

X-Runtime: 8.157269 

X-Served-By: 3e68298776c691d4ed82ce5a8c891c6a 

X-UA-Compatible: IE=Edge,chrome=1 

X-XS9-Protection: 1; mode=block 


图 2-12 ”HTTPS 响 应 头 部 内 容 





2.2.5 浏览 器 Web 安 全 控制 


除了 HTTPS 外 ，Web 前 端 浏览 右 设 置 的 安全 性 的 控制 还 有 很 多 ， 
过 菏 些 特定 的 head 头 配置 ， 就 可 以 完成 浏览 器 端的 安全 性 设置 。 
们 再 来 看 几 个 典型 的 安全 消息 头 域 设 置 。 


X-XSS-Protection 


昌 头 设置 主要 是 用 2 的 反射 性 XSS 问 题 的 
发 生 ， 通 过 这 种 方式 可 以 在 浏览 器 层面 增加 前 端 网 页 的 安全 性 。 不 过 目 
及， 人 较 高 版 本 的 Internet Explorer、 we Safari (webkit) 支持 这 
个 消息 头 域 字段 设置 。X-XSS-Protection 通 常设 置 如 下 。 








X-XSS-Protection: 1; 
mode=block 0 -关闭 对 浏览 器 的 xss 防 护 ;， 1 -开启 xss 防 护 
mode=block 可 以 开启 XSS 防 护 并 通知 浏览 器 阻止 而 不 是 过 滤 用 户 注入 的 XSS 脚 本 





Strict-Transport-Security 


Strict Transport Security (STS) 是 一 种 用 来 配置 浏览 器 和 服务 器 之 
间 安 全 通信 的 机 制 ， 主 要 用 来 防止 中 间 者 攻击 ， 因 为 它 强 制 所 有 的 通信 
都 使 用 HITPS， 在 普通 的 HITP 报 文 请 求 中 配置 STS 是 没有 作用 的 ， 而 
且 攻 击 者 也 能 更 改 这 些 值 。 为 了 防止 这 样 的 现象 发 生 ， 很 多 浏览 器 内 置 
了 一 个 配置 STS 的 站 点 列表 ， 在 Chrome 浏 览 器 下 可 以 通过 访问 
chrome://net-internals/#hsts 查 看 浏览 器 中 站 点 的 STS 列 表 ， 一 般 STS 的 配 
置 实现 如 下 。 








max-age=31536000 -告诉 浏览 器 将 域名 缓存 到 STS 列 表 中 ， 只 有 这 些 特定 域名 下 的 资 
间 是 一 年 
max-age=31536000 ， 








includeSubDomains; 
preload; -告诉 浏览 器 将 域名 缓存 到 STS 列 表 里 面 并 且 包 含 所 有 的 子 域名 ， 并 可 支持 预 ) 
max-age= 0 -告诉 浏览 器 移 除 在 STS 组 存 里 的 域名 ， 或 者 不 保存 当前 域名 











Content-Security-Policy 


我 们 简称 它 为 CSP， 这 是 一 种 由 开发 者 定义 的 安全 策略 性 声明 ， 通 
过 CSP 所 约束 的 的 规则 设 定 ， 浏 览 器 只 可 以 加 载 指定 可 信 的 域名 来 源 的 
内 容 ( 这 里 的 内 容 可 以 是 脚本 、 图 片 、iframe、font、style 等 等 远程 资 
源 ) 。 通 过 CSP 协 定 ，Web 只 能 加 载 指 定安 全 域名 下 的 资源 文件 ， 保 证 
运行 时 的 内 容 总 处 于 一 个 安全 的 环境 中 。 








Content-Security-Policy:default-src *; base-uri 'self'; block 
child-src 'self' render.githubusercontent.com; connect-src 's 
status.github.com api.github.com www.google-analytics.com github- 
wss://live.github.com; font-src assets-cdn.github.com; form-ac 
gist.github.com; frame-src 'self' render.githubusercontent.com 
assets-cdn.github.com identicons.github.com www.google-analytic 
collector.githubapp.com *.gravatar.com *.wp.com *.githubuserco 
'none'; object-src assets-cdn.github.com; plugin-types applicatio 


script-src assets-cdn.github.com; style-src 'self' 'unsafe-inline 


上 面 的 代码 是 图 2-2 中 Content-Security-Policy 的 配置 内 容 ， 这 里 定义 
了 较 多 的 设置 ， 其 中 block-all-mixed-content 就 是 之 前 提 到 的 ，HTTPS 请 
求 的 HTML 会 控制 阻塞 外 部 HTTP 资 源 的 文件 加 载 。 


Access-Control-Allow-Origin 


Access-Control-Allow-Origin 是 从 Cross Origin Resource 
Sharing (CORS) 中 分 离 出 来 的 。 这 个 头 部 设置 是 决定 哪些 网 站 可 以 访 
问 当前 服务 器 资源 的 设置 ， 通 过 定义 一 个 通配符 或 域名 来 决定 是 单一 的 
网 站 还 是 所 有 网 站 可 以 访问 服务 器 的 资源 。 需 要 注意 的 是 ， 如 末 服 务 器 
端 定义 了 通配符 “类 ”， 那 么 服务 端的 Access-Control-Allow- 








Credentials (是 人 否 允 许 请 求 时 携带 验证 信息 ) 选项 就 无 效 了 ， 此 时 用 户 
浏览 器 中 的 不 同 域 Cookie 信 息 将 默认 不 会 在 服务 器 请 求 里 发 送 〈 即 如 末 
需要 实现 带 Cookie 进 行 跨 域 请 求 ， 则 要 明确 地 配置 允许 来 源 的 域 ， 使 用 
任意 域 的 配置 是 不 合法 的 ) 。 














Access-Control-Allow-0rigin : * *- 通配符 允许 任何 远程 资源 来 访问 Access 
的 内 容 
http://www.domain.com - 只 允许 特定 站 点 才能 访问 当前 资源 























Access-Control-Allow-Origin 党 党 作为 跨 域 共享 设置 的 一 种 实现 方 
式 ， 其 他 常用 的 跨 域 手段 还 有 : JSONP(JSON with Padding)、script 标 
签 跨 域 、window.postMessage、 修 改 document.domain 跨 子 
域 、window.name 跨 域 和 WebSocket 跨 域 等 。 

参考 资料 : 

https:/www.w3.o0rg/TR/2014/WD-CSP11-20140211/。 


http://www.html5rocks.com/en/tutorials/security/transport-layer- 


security/。 


2.3 ”前 闹 实 时 协议 





在 实际 的 前 端 应 用 项 目 中 ， 除 了 使 用 应 答 模 式 的 HITP 协 议 进行 普 
通 网 络 资源 文件 的 请 求 加 载 外 ， 有 时 也 需要 建立 客户 端 〈 这 里 主要 指 浏 
览 右 ) 人 例如 网 页 实时 聊天 的 应 用 场 
景 ， 这 就 必须 涉及 浏览 器 端的 实时 通信 协议 了 。 对 于 这 些 对 实时 性 要 求 
较 高 的 应 用 场景 ， 普 通 的 HITP〈S) 协议 就 并 不 适用 。 虽 然 前 端 可 以 通 
过 Ajax 定时 问 服 务 疹 轮 询 的 方式 来 持续 获取 服务 端的 消息 ， 但 是 这 种 方 
式 效 率 相 对 较 低 ， 目 前 一 般 只 (用 来 处 理 浏览 器 上 降级 体验 的 实时 场景 
包括 AJAX 的 方式 在 内 ， 目 前 可 用 来 在 前 端 浏览 圳 上 进行 实时 通信 的 功 
能 实现 方式 主要 有 WebSocket、Poll、Long-poll 和 DDP 协 议 。 














2.3.1 WebSocket 通 信 机 制 


在 本 章 第 一 节 中 我 们 讲 过 ，HTTP 1.1 的 协议 支持 使 用 Upgrade 头 域 
设置 进行 协议 扩展 切换 ， 这 样 就 可 以 实现 从 HTTP 1.1 协 议 切 换 到 其 他 通 
信 协 议 进 行 通信 了 。 溺 运 的 是 ， 现 在 所 有 的 浏览 器 基本 都 广 持 HTTP 1.1 
一 种 很 典型 的 实时 通信 协议 便 是 WebSocket，WebSocket 是 浏览 

端 和 服务 器 端 建立 实时 连接 的 一 种 通信 协议 ， 可 以 在 服务 器 和 浏览 需 
oo i 前 信 ， 关 于 WebSocket 的 连接 过 程 可 以 参 
考 图 2-4。 





相对 于 HTTP 1.1 协 议 ，WebSocket 协 议 的 优势 是 方便 服务 器 和 浏览 
器 之 间 的 双 同 数据 实时 通信 。 但 我 们 要 明白 的 是 ，HTTP ”2 也 支持 服务 














端的 消息 推送 ， 也 是 可 以 来 适应 这 一 场景 的 ， 不 过 这 是 未 来 的 事情 了 。 
先 简单 看 一 下 官方 WebSocket 协 议 中 数据 帧 的 定义 格式 。 


图 2-13 为 Websocket 官 方 参考 标准 的 消息 数据 帧 结构 。 


0 1 2 3 
D123456 T7890123456 T89012345678901 
二 二 二 二 二 -一 -一 一 二 二 -一 一 一 一 一 一 一 一 一 一 一 一 十 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 十 
[FIRIREIR| opcode | 区 | Earload len | Extended bayrload leneth | 
|IIS|I3S|Is| idy |a| [7) | (1676d) | 
IN|IY| YI 15| | (if payload len==126/127) | 
| 111213| |K| | | 
二 十 十 十 -二 -一 一 一 一 一 一 二 二 一 一 一 一 一 一 一 一 一 一 一 一 ss Ss Sa Se + 
| Extended payload Lergth contimed, if payload len == 127 | 
+--------------- 十 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 十 
| [Maskine—key, if MASK set to 1 | 
十 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 二 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 十 
| Maskinmg-key (continued) | Payload Data | 
和 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 - 一 一 十 
Payvload Data contirnued ... : 
+------------------------------- 十 
Fayvload Data continued ... 
十 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 + 





图 2-13 ”Websocket 数 据 帧 结构 


FIN: 1 位 。 表 示 当 前 数据 帧 是 人 否 为 消息 的 最 后 一 帧 ， 一 个 报 文 消息 
由 一 个 或 多 个 数据 帧 构成 ， 如 果 消 奶 只 由 一 帧 构成 ， 那 么 起 始 帧 就 是 结 
束 帧 。 





RSV1，RSV2，RSV3: 各 1 位 。 如 果 未 定义 扩展 ， 那 么 这 三 位 都 是 
0; 如 果 定 义 了 扩展 ， 则 为 非 0 值 ;如果 接 收 的 帧 此 处 非 0， 并 且 扩 展 中 
没有 该 值 的 定义 ， 那 么 关闭 连接 。 


OPCODE: 4 位 。 表 示 PayloadData 有 效 负 荷 ， 如 果 接 收 到 未 知 的 
OPCODE， 接 收 端 必须 关闭 连接 。 


O 


0x0 表 示 附 加 数据 帧 ; 

0x1 表 示 文 本 数据 帧 ; 

0x2 表 示 二 进 制 数 据 帧 ; 

0x3-7 和 暂时 无 定义 ， 为 以 后 的 非 控制 帧 保留 
0x8 表 示 连 接 关 闭 ; 

0x9 表 示 ping; 


0xA 表 示 pong，ping、pong 用 于 保持 客户 端 与 服务 器 之 间 的 心跳 
连接 ; 


0xB-F 暂 时 无 定义 ， 为 以 后 的 控制 帧 保留 


MASK: 1 位 。 用 于 标识 PayloadData 是 否 经 过 掩 码 处 理 。 如 果 是 1， 
Masking-key 域 的 数据 即 是 掩 码 密 钥 ， 用 于 解 伺 PayloadData。 





值得 注意 的 是 ，WebSocket 在 网 络 中 传输 的 最 小 单位 也 为 帧 ， 数 据 
的 传输 也 可 以 理解 为 流 式 的 传输 。 但 WebSocket 目 前 在 项 目 中 使 用 时 仍 
然 存 在 一 些 兼 容 性 问题 ， 它 还 不 支持 焉 11 以 下 或 Android 4.4 版 本 以 下 的 
浏览 器 。 所 以 在 实际 项 目 中 ， 如 果 要 考 上 处 低 版 本 浏览 器 的 使 用 ， 我 们 仍 
要 考虑 其 他 的 实现 方式 。 





参考 资料 : https://tools.ietf.org/html/rfc6455。 


2.3.2 Poll 和 Long-poll 


尽管 HIML5 的 WebSocket 为 我 们 提供 了 实现 前 端 实时 化 的 方案 ， 提 
供 的 API 也 很 完备 。 但 不 幸 的 是 ， 并 非 所 有 浏览 器 都 支持 WebSocket 协 
议 ， 在 加 面 或 移动 端 浏览 器 应 用 开发 时 我 们 仍 不 能 放心 地 使 用 它 ， 这 时 
就 必须 回 到 现 有 的 HITP 协 议 上 考虑 采用 Pol 〈 轮 询 ) 和 Long-poll (长 轮 
询 ) 的 方案 来 应 对 实时 通信 的 场景 了 。 





Poll 


Pol] 方 案 很 容易 理解 ， 即 浏览 器 采用 定时 问 服 务 器 及 送 请 求 轮 询 的 
方法 不 断 发 送 或 拉 取消 息 。 如 图 2-14 所 示 ， 浏 览 器 每 隔 一 秒 向 服务 器 发 
送 一 次 请 求 ， 在 一 秒 内 服务 器 更 新 的 内 容 在 下 一 次 轮 询 中 将 被 浏览 右 拉 
取 返 回 。 所 以 这 种 方案 相对 来 说 实时 性 较 差 ， 而且 没 有 新 消息 时 依然 需 
要 不 断 轮 询 ， 比 较 消耗 系统 资源 。 





轮 询 1 


消息 返 





1 
轮 询 2 
ls 
轮 询 3 
图 2-14 ”poll 轮 询 实现 原理 
Long-poll 


HTTP 请 求 可 以 设置 一 个 较 长 的 Timeout 等 待 时 间 ， 这 样 网 络 轮 询 请 
求 束 可 以 维持 一 段 较 长 的 时 间 后 返回 结果 ， 这 也 就 是 Long-poll (长 轮 
询 ) 的 基本 思路 。 服 务 器 只 要 在 这 上 段 长 轮 询 时 间 内 进行 啊 应 ， 请 求 便 会 
立即 返回 结果 ; 如 果 这 上 段 时 间 服 务 器 没有 返回 ， 浏 览 右 端 将 上 自动 啊 应 超 
时 并 重新 发 起 一 个 长 轮 询 请 求 。 


如 图 2-15 所 示 ， 浏 览 右 模拟 发 起 轮 询 请 求 后 将 维持 一 段 时 间 ， 这 上 段 
时 间 内 只 要 有 服务 器 消息 返回 ， 则 返回 成 功 ， 随 之 立即 重新 发 送 一 个 新 
的 长 轮 询 等 待 服务 器 啊 应 。 











Server 


长 轮 询 1 


轮 询 返回 




















图 2-15 ”Long-poll 轮 询 实 现 原理 





相 比 于 Poll，Long-poll 的 实现 更 加 节省 系统 资源 ， 实 时 性 更 好 ， 不 
用 持续 地 定时 发 送 网 络 请 求 。Long-poll 目 前 一 个 很 典型 的 应 用 场景 就 是 
网 站 通过 对 应 的 移动 客户 端 进行 扫描 二 维 码 登 录 ， 即 用 户 使 用 移动 客 己 
端 扫描 二 维 码 登 录 网 站 ， 成 功 后 桌面 浏览 右 页 面目 动 啊 应 跳 转 进入 一 个 
新 的 登录 后 页 面 。 





如 图 2-16 所 示 ， 用 户 打开 蝎 面 浏览 句 页 面 后 会 立即 发 送 一 个 用 户 录 
陆 状态 碍 询 的 长 轮 询 请 求 ， 同 时 开始 使 用 移动 客户 器 扫 描 二 维 码 ， 扫 描 











成 功 时 移动 客户 端 会 调用 接口 改变 用 户 的 登陆 状态 ， 此 时 服务 器 可 以 不 
上 条 轮 询 获取 用 户 登 录 状 态 改 变通 知 ， 一 旦 检测 到 用 户 使 用 移动 客户 端 扫 
码 登 录 ， 就 将 用 户 登 录 状 态 返 回 给 浏览 器 的 长 轮 询 请 求 ， 用 户 浏览 器 请 
求 到 用 户 登 录 状 态 后 完成 后 面 的 跳 转 ， 前 端 请 求 登录 状态 的 轮 询 就 可 以 
使 用 AJAX 来 模拟 实现 。 其 实 和 一 般 的 请 求 没有 太 大 的 差别 。 


提 面 浏览 器 消息 服务 器 移动 客户 端 


长 轮 询 1 














等 待 用 户 扫 码 


纶 询 返 回 消息 返回 用 户 扫 码 登录 





浏览 器 跳 转 




















图 2-16 ”二 维 码 扫描 登录 跳 转 原理 








function _getQrAuth () { 


const self = this; 


// 请 求 查 询 登 录 态 

$.ajax(t{ 
url: '/api/vi/user/qrcode/auth', 
type: 'get', 
dataType: 'json', 


cache: false, 


timeout: 30 * 1000， // 设置 30 秒 超时 时 间 


success: function(data) { 


// 登录 成 功 后 自动 跳 转 
if (data.retcode === 200) { 
window.location.href = '/user_info.html?backUrl=" 
encodeURIComponent (backUr1); 
} 
}, 


error: function(e) { 


console.1log(JSON.stringify(e)); 


}); 


在 Node.js 服 务 端 对 应 的 处 理 程序 可 以 用 如 下 方法 来 实现 登陆 态 的 循 
环 碍 询 。 


const qrcodeAuth = function*(req, res) { 


let ctx = this; 


let authState = false,; 
while(true)t 
// 查询 用 户 登 录 态 ， 已 登录 则 返回 用 户 信息 ， 否 则 返回 false 
authState = queryAuthState(ctx ) ; 








If(authState ){ 
// 如 果 用 户 已 登录 ， 则 返回 成 功 结果 





ctx.body = { 
retcode: 200 


} 
return ， 
} 
} 
ctx.body = { 
retcode: 500, 
msg: 'time out' 
} 


Web 应 用 中 客户 端 和 服务 端 建立 实时 通信 的 方式 比较 多 ， 包 括 
HTML5 提 供 的 WebSocket、Flash 实 现 的 WebSocket、XMLHttpRequest 
轮 询 长 连接 、XMLHttpRequest Multipart Streaming、script 标 签 的 长 时 
间 轮 询 等 。 不 常用 的 方式 暂 不 介绍 过 多 ， 大 家 有 兴趣 可 以 自行 了 解 。 


2.3.3 ”前端 DDP 协 议 


DDP (Distributed Data Protocol， 分 布 式 数据 协议 ) 是 一 种 新 型 的 
客户 问 与 服务 器 端的 实时 通信 协议 ， 由 于 兼容 性 的 原因 ， 目 前 使 用 还 不 
广泛 。DDP 使 用 JSON 的 数据 格式 在 客户 端 和 浏览 器 之 间 进 行 数据 传输 
通信 ， 上 所 以 对 于 前 端 开 发 者 来 说 使 用 非常 方便 。 有 名 的 Meteor Web 框 架 
的 双 辐 实时 数据 更 新 机 制 底 层 使 用 的 就 是 DDP， 这 种 协议 模式 下 客户 端 


可 回 服务 喜 问 发 起 远程 过 程 调用 ， 客 户 器 也 可 以 订阅 服务 端 数据 ， 在 服 
务 端 数 据 变化 时 ， 服 务 需 会 问 客 己 站 发 起 通知 ， 触 发 浏览 右 啊 应 的 操 
作 。 当 然 我 们 借助 DDP 模 块 也 可 以 创建 一 个 简单 的 DDP 协 议 的 服务 。 





// 引入 DDP 模块 ,创建 客户 端 连接 右 
const DDPClient = require('ddp'); 





const client = new DDPClient({ 
host: 'localhost', 
port: 3000 

}); 


// 监听 消息 

client.on('message', function(data, flags) { 
console.1og('[DDP 消息 ]: '，data); 

}); 

// 连接 





client.connect(function() { 
// 客户 端 订阅 post 
client.subscribe('post', [], function() { 
console.1log('[post 订阅 消息 ] '); 
}); 
}); 


以 Meteor 为 例 ， 在 web 浏览 器 端 也 需要 引入 相应 的 协议 解析 处 理 模 
块 来 完成 相应 的 通信 。 


<script src="./path/meteor-ddp.js"></script> 





需要 注意 的 是 ， 在 浏 贤 絮 问 使 用 DPP 协 议 仍 然 存在 部 分 兼容 性 问 
题 ， 所 以 目前 DDP 仍 没有 被 广泛 使 用 在 实际 项 目 中 ， 但 我 们 可 以 认为 它 
征 面 癌 未 来 的 一 种 前 端 实时 协议 ， 以 后 极 有 可 能 被 广泛 使 用 。 





2.4 RESTful 数 据 协 议 规范 


REST (Representational State Transfer， 表 述 性 状态 转化 ) 并 不 是 某 
一 种 具体 的 协议 ， 而 是 定义 了 一 种 网 络 应 用 软件 之 间 的 架构 关系 并 提出 
了 一 套 与 之 对 应 的 网 络 之 间 区 互 调用 的 规则 。 与 之 类 似 的 例如 早期 的 
WebSevice， 当 然 WebSevice 现 在 基本 都 不 用 了 。 而 在 REST 形 式 的 软件 
应 用 服务 〈 这 里 讨论 的 主要 是 web 应 用 服务 ) 中 ， 每 个 资源 都 有 一 个 与 
之 对 应 的 URI 地 址 ， 资 源 本 号 都 是 方法 调用 的 目标 ， 方 法 列表 对 所 有 资 
源 都 是 一 样 的 ， 而 且 这 些 方法 都 推荐 使 用 HTTP 协 议 的 标准 方法 ， 例 如 
GET、POST、PUT、DELETE 等 。 如 果 一 个 网 络 应 用 软件 的 设计 是 按照 
REST 定 义 的 ， 我 们 就 可 以 认为 它 使 用 的 交互 调用 的 方法 设计 遵循 
RESTful 规 范 。 


换 种 方式 理解 ，RESTful 是 一 种 软件 架构 之 间 交 互 调用 数据 的 协议 
风格 规范 ， 它 建议 以 一 种 通用 的 方式 来 定义 和 管理 数据 交互 调用 接口 。 
为 了 方便 理解 ， 我 们 来 看 一 个 具体 场景 。 一 个 项 目 经 过 了 需求 阶段 和 评 
审 阶 段 后 便 要 着 手 去 开发 了 ， 团 队 的 前 端 工 程 师 和 后 台 工 程 师 需要 商量 
前 后 台 的 数据 协议 该 怎样 定义 。 例 如 ， 对 于 书籍 book 的 记录 管理 接口 ， 
有 增 、 删 、 改 、 查 操作 ， 于 是 我 们 用 path/addBook、path/deleteBook、 
path/updateBook、path/getBook 来 定义 接口 看 上 去 好 像 没有 什么 问题 。 
后 来 ， 男 一 个 项 目 也 有 类 似 的 接口 定义 ， 却 可 能 叫 作 path/appendBook、 
path/delBook、path/modifyBook、path/getBook。 接 着 有 一 天 ， 项 目 负 责 
人 可 能 会 说 ， 要 升级 接口 来 满足 新 的 需求 ， 于 是 我 们 又 添加 了 
path/addBook2、path/deleteBook2、path/updateBook2、path/getBook2。 
这 样 用 起 来 是 没有 什么 问题 ， 但 是 这 些 随意 的 定义 会 增加 数据 接口 维护 





难度 和 项 目 继续 开发 的 成 本 。 


或 许 对 于 你 来 说 ， 使 用 add、 人 add2 、add3 都 
没有 问题 ， 但 是 如 果 想 将 项 目 转 给 其 他 人 继续 维护 ， 请 尽量 不 要 这 样 
做 ， 因 为 这 样 的 数据 交互 协议 的 制定 比较 乱 ， 没 有 统一 的 规范 会 很 难 管 
理 。 





这 时 ， 我 们 或 许 会 考虑 使 用 文档 或 规范 ， 规 定 一 定 要 使 用 add 来 还 
加 ， 新 的 接口 版 本 号 放 前 面 pathMv2/addBook， 开 发 的 人 必须 严格 按照 文 
档 规范 去 写 。 这 样 做 很 好 ， 但 依然 不 够 完善 ， 原 因 有 以 下 几 点 : 一 是 因 
为 项 目 工 作 常常 排 期 紧张 ， 你 可 能 没 时 间 去 写 文 档 ， 或 者 后 面 接手 的 人 
不 想 去 看 文档 ; 二 是 开发 修改 功能 后 很 可 能 来 不 及 或 筷 记 去 更 新 文档 ; 
三 是 无 论文 档 写 得 多 清楚 ， 我 们 看 起 来 效率 总 是 很 低 。 这 时 如 果 有 一 个 
风格 更 好 的 通用 规范 来 定义 数据 交互 接口 ， 就 不 用 这 么 且 烦 了 。 














所 以 我 们 完全 可 以 利用 RESTful 设 计 的 规范 特性 来 解决 上 面 遇 到 的 
问题 。 对 于 书籍 记录 操作 接口 的 命名 可 以 如 下 操作 。 


如 表 2-1 所 示 ， 使 用 RESTful 规 范 来 重新 设计 接口 后 ， 一 切 就 变 得 很 
清晰 自然 ， 这 样 新 的 工程 师 接手 项 目 时 ， 只 要 他 足够 了 解 RESTful 规 
范 ， A Ea 即使 他 不 了 解 RESTful 规 范 ， 也 可 以 很 快 地 
去 了 解 ， 这 就 可 以 避免 他 去 读 那 份 看 似 完 善 其 实 元 长 杂 的 文档 。 








表 2-1 RESTful 内 格 接口 定义 


URI 描述 


POST path/v1/book| 新 增 书籍 信息 ， 例 如 添加 新 书籍 
IDELETE | path/v1/book| 删 除 书籍 信息 ， 例 如 移 除 下 染 某 本 书籍 的 信息 


Pe 雪 息 ， 例 如 修改 革 本 书籍 的 信息 














DISPATCH pathv book 县 扑 于 分 作 生 | 
path/v1/book "0 


所 以 ， 我 们 开发 时 就 可 以 这 样 来 定义 Web 端 接口 路 由 了 ， 对 于 前 后 
端 区 互 时 ， 只 需要 引用 资源 URI 即 可 。 





const bookApi = require('../controller/book'); 
const router = require('koa-router')(); 


let bookUri = '/path/vi/book'; 


// 书籍 相关 Api 

router .post (bookUri, bookApi.addBook); // 添加 书籍 记录 
router ,get(bookUri,，bookApi.selectBook);  // 查询 书籍 记录 
router ,delete(bookUri，bookApi,deleteBook); // 删除 书籍 记录 
router .put(bookUri, bookApi.,updateBook);  // 修改 书籍 记录 


module.exports = router ; 





如 果 按 照 这 个 格式 来 定义 接口 ， 未 来 即使 接口 内 容 需 要 升级 也 会 变 
得 很 简单 ， 只 需要 修改 bookUri 的 路 径 就 可 以 了 。 


如 表 2-2 所 示 ， 我 们 可 以 使 用 某 一 级 路 径 来 清晰 地 标识 接口 的 版 本 
号 ， 当 然 更 加 标准 的 RESTful 定 义 方 式 可 能 是 将 版 本 号 写 在 HITP 请 求 头 
信息 的 Accept 字 段 中 进行 区 分 。 但 其 实 这 样 会 给 我 们 的 开发 带 来 一 些 麻 
烦 ， 例 如 不 能 在 开发 阶段 直观 地 看 出 这 个 接口 是 针对 哪个 版 本 功能 逻辑 
的 描述 ， 必 须 打 开 请 求 的 头 部 才能 得 到 接口 版 本 ， 因 此 推荐 使 用 某 一 
路 径 来 清晰 地 标识 接口 的 版 本 号 信息 ， 尽 管 这 和 规范 在 一 定 程 度 上 是 相 
背离 的 。 











表 2-2 RESTful 内 格 升级 版 本 接口 定义 


URI 描述 
POST path/v2/book| 新 增 书籍 信息 ， 例 如 添加 新 书籍 
DELETE “|path/v2/book| 删 除 书籍 信息 ， 例 如 移 除 下 架 某 本 书籍 的 信息 
PUT path/v2/book| 全 量 更 新 书籍 信息 ， 例 如 修改 某 本 书籍 的 信息 
DISPATCHIpath/v2/book| 更 新 书籍 部 分 信息 

GET path/v2/book| 获 取 书 籍 信息 


RESTful API 的 主要 设计 原则 就 是 这 些 ， 总 结 来 说 惑 是 结合 HITP 的 
固有 方式 来 表征 资源 的 状态 变化 描述 ， 而 不 是 通过 动词 加 名 词 的 方式 来 
设计 。 这 种 定义 风格 可 以 让 数据 交互 的 方式 更 加 规范 化 ， 一 定 程度 上 有 
利于 降低 项 目 开 发 和 维护 的 成 本 。 














2.5 与 Native 交 互 协议 


移动 互联 网 兴起 后 ， 售 能 移动 设备 出 现 ， 移 动 端 Native 开 发 〈 我 们 
现在 一 般 将 移动 端 原生 应 用 的 开 友 称 为 移动 端 Native 开 发 ) 几乎 一 夜 之 
间 盛 行 起 来 ， 并 很 快 得 到 第 一 批 据 金 者 的 奶 捧 。 相 比 于 之 前 Wap 
Web“〔〈 可 以 理解 为 移动 互联 网 兴起 前 手机 端的 网 页 应 用 ) 应 用 的 简单 网 
页 开发 ，Native App 以 更 优 的 性 能 、 更 好 的 用 户 体 验 以 及 Google、Apple 
平台 三 商 对 开发 者 的 共 启 支持 引领 了 移动 互联 网 时 代 智 能 应 用 软件 开发 
的 第 一 波浪 潮 。 随 之 而 来 的 就 是 HTML5 的 出 现 ， 它 允许 开发 者 在 移动 
设备 上 快速 开发 网 页 端 应 用 ， 也 可 以 将 Web 页 面 蔡 入 到 Native 应 用 中 ， 
它 的 到 来 让 移动 互联 网 应 用 开发 很 快 进入 到 了 Native App、Web App、 
Hybrid App 并 存 的 时 代 。 随 着 移动 互联 网 第 一 波浪 浏 渐渐 过 去 ，Hybrid 
App 结 合 了 Native App 和 Web App 的 优势 ， 在 牺牲 一 小 部 分 性 能 的 前 提 
下 ， 适 应 了 更 多 的 移动 应 用 开发 场景 ， 成 为 目前 广 为 使 用 的 移动 端 开发 
模式 。 当 然 Native App 和 Web App 今 天 也 依然 有 它们 各 自 适用 的 应 用 场 
景 。 基 于 这 个 背景 我 们 来 具体 看 看 Hybrid App 中 与 前 端 相关 的 协议 与 应 
用 。 














2.5.1 Hybrid App 应 用 概述 


Hybrid App 是 在 Native App 应 用 的 基础 上 结合 了 了 Web App 应 用 所 形 
成 的 模式 ， 我 们 称 之 为 混合 App。 从 技术 开发 上 来 看 ， 相 比 于 传统 的 和 更 
面 浏览 器 端的 web App， 它 具有 以 下 几 方 面 明显 的 特征 。 





Hybrid App 可 用 的 系统 网 络 资源 更 少 。 由 于 移动 设备 CPU、 内 
存 、 网 卡 、 网 络 连接 多 方面 的 限制 ，Hybrid App 的 前 端 页面 可 
用 的 系统 资源 远 远 小 于 果 面 浏览 器 。 束 网 络 连接 来 说 ， 大 部 分 
移动 设备 的 使 用 者 使 用 的 仍 是 3G、4G 甚 至 2G 的 网 络 ， 带 宽 和 
流量 均 有 限制 ， 和 更 面 浏览 右 的 市 宽 接 入 相 比 还 是 有 着 本 质 上 

的 区 别 。 





支持 更 新 的 浏览 器 特性 。 我 们 知道 目前 智能 设备 浏览 器 种 类 相 
对 较 少 ， 且 随 着 人 硬件 设备 的 快速 更 新 ， 主 流 的 浏览 器 以 WebKit 
内 核 导 多 ， 文 持 较 新 的 浏览 器 特性 。 不 像 梨 面 浏 览 器 那样 需要 
考虑 较 低 版 本 Internet Explorer 的 兼容 性 问题 。 





可 实现 离线 应 用 。Hyhrid 的 一 个 优势 是 可 以 通过 新 的 浏览 右 特 
性 或 Native 的 文件 读 取 机 制 进行 文件 级 的 文件 缓存 和 离线 更 
新 。 这 是 朱 面 浏览 占 上 较 难 做 到 的 。 这 些 离 线 机 制 第 常 可 以 用 
来 弥补 Hybrid App 网 络 系统 资源 不 足 的 缺点 ， 让 浏览 器 脚本 更 
快 从 本 地 缓存 中 加 载 。 


较 多 的 机 型 考虑 。 由 于 目前 移动 设备 平台 的 不 统一 性 ， 而 且 不 
同 设备 机 型 系统 的 浏览 器 实现 仍 有 一 定 的 区 别 ， 因 此 Hybrid 
App 应 用 仍 需 要 考虑 不 同 设备 机 型 的 兼容 性 问题 。 


支持 与 Native 交 互 。Hybrid ”App 的 另 一 个 特点 是 结合 了 移动 端 
Native 特 性 ， 可 以 在 前 端 页 面 中 调用 客户 端 Native 的 能 力 ， 例 
如 摄像 头 、 和 定位、 传感器、 本 地 文件 访问 等 。 而 这 些 也 是 我 们 
在 本 节 中 要 关注 的 内 容 。 


所 以 在 实际 的 Hybrid App 项 目 开发 中 尤其 需要 注意 上 述 问 题 ， 针 对 





这 些 问题 ， 我 们 需要 做 好 交互 、 优 化 和 兼容 性 的 工作 。 其 中 前 端 与 
Native 的 交互 是 目前 Hybrid 应 用 Br 的 一 个 环节 ， 也 是 
设计 实践 过 程 中 比较 复杂 的 一 个 部 分 。 丁 中， 我 们 先 来 了 解 Hybrid 
App 中 前 端 与 Native 交 互 方面 i 看 看 Hybrid App 与 Native 之 间 的 交 
互 协议 的 具体 内 容 。 





2.5.2 ”Web 到 Native 协 议 调 用 


在 HIML5 中 调用 Native 程 序 一 般 有 两 种 较 通 用 的 方法 ， 下 面 逐 一 来 


首先 来 看 一 下 Hybrid App 中 如 何 通过 URI 请 求 在 HIML5 前 端 页 面 中 

来 调用 一 个 Native 的 方法 或 界面 。 其 主要 原理 是 ，Native 应 用 可 在 移动 
端 系统 中 注册 一 个 Scheme 协 议 的 URI， 这 个 URI 可 在 系统 的 任意 地 方 授 
权 访 问 来 调 起 一 段 原生 方法 或 一 个 原生 的 界面 。 同 样 ，Native 的 
WebView 控 件 中 的 JavaScript 脚 本 的 请 求 也 可 以 匹配 调用 这 一 通用 的 
Scheme 协议 。 例 如 我 们 通过 对 window.location.href 赋 值 或 使 用 iframe 的 

方式 有 友 送 一 个 URI 的 请 求 ， 这 个 请 求 可 以 被 Native 应 用 的 系统 捕获 并 调 
起 Native 应 用 注册 匹配 的 这 个 Scheme 协议 内 容 。 代 码 如 下 。 








let iframe = document.createElement('iframe') ; 
iframe.setAttribute('style' , 'display:none') ，; 
document .body.appendchild(iframe) ; 


iframe.setAttribute('src' , 'myApp://className/method?args') ，; 


如 图 2-17 所 示 ， 一 般 Native 应 用 会 提前 向 移动 端 系统 注册 Scheme 协 
议 ， 之 后 前 端 脚本 发 送 iframe 中 的 URI 资 源 请 求 时 ，WebView 会 将 获取 
URI 资 源 的 地 址 交 给 Native App，Native App 将 请 求 转发 给 系统 并 进行 解 
析 。 此 时 如 果 你 的 Native 应 用 注册 了 与 之 匹配 的 Scheme URI 到 系统 ， 系 
统 就 会 通过 此 URI 地 址 执行 该 Scheme 协议 定义 的 Native 操 作 ， 执 行 一 段 
Native 代 码 或 者 拉 起 App 的 某 个 界面 “例如 打开 摄像 状 、 打 开 移 动 App 首 
页 等 ) 。 这 样 就 完成 了 HTML5 中 JavaScript 对 Native 的 调用 。 


系统 










注册 Scheme 协议 


iframe 请 求 调用 
捕获 请 求 并 提交 系统 
啊 应 Scheme 协议 


自 调用 Native 页 面 








图 2-17 ”Scheme 协议 注册 调用 过 程 





通过 addJavascriptInterface 注 入 方法 到 页 面 中 调用 


除了 使 用 URI 方 式 调用 Native 注 册 的 Scheme 协议 以 外 ， 还 可 以 通过 
addJavascriptInterface 方 法 将 Native 的 一 个 对 象 方法 注入 到 页 面 中 ， 供 
JavaScript 调 用 。 这 里 就 以 一 个 Android 平 台 的 例子 来 看 下 具体 是 如 何 使 
用 的 。 





// 声明 webSettings 的 实例 
WebSettings webSettings = webView.getSettings(); 
// 设置 webView 内 可 执行 JavaScript 脚本 
webSettings.setJavascriptEnabled(true); 
// 加 载 页 面 到 WebView 中 
webView.1loadUrl("file:///android asset/index.html"); 
// 添加 native 类 实例 注入 到 webView 中 
webView.addJavascriptInterface(new JsInterface(), "native"); 
public class JsInterface { 

Q@JavascriptInterface 

public void showToast(String toast ) { 


Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHO 


这 里 ，Native 会 同 webView 的 全 局 作用 域 中 注入 一 个 native 的 全 局 对 
象 ， 并 且 native 对 象 中 具有 showToast 方 法 ， 而 这 个 方法 是 可 以 通过 前 端 
页 面 中 JavaScript 调 用 的 。 对 应 的 HTML5 页 面 则 可 以 按 如 下 方式 编写 。 


<!-- index.html] --> 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>demo</title> 
</head> 
<body> 
<script> 


nativeAlert('hello ouven ' ) ; 





// 这 里 就 可 以 调用 native 实例 对 象 的 showToast 方法 了 
function nativeAlert(msg)t 
native,.showToast (msg); 
} 
</script> 
</body> 
</html> 


通过 向 WebView 的 全 局 作用 域 注入 native 对 象 的 方法 ，WebView 中 
页 面 的 window 对 象 束 可 以 直接 通过 前 端的 native.showToast 方 法 调用 
Native 应 用 中 JsInterface 的 动作 了 。 当 然 这 里 是 个 很 简单 的 实例 ， 它 的 主 
要 实现 原理 是 通过 addjavascriptInterface 将 Java 的 实例 对 象 注入 到 
WebView 中 ， 让 WebView 中 的 页 面 JavaScript 可 以 直接 使 用 ， 采 用 这 种 
方法 也 可 以 实现 更 加 复杂 的 调用 功能 。 








2.5.3 Native 到 Web 协 议 调 用 


相反 ， 如 果 Native 需 要 主动 调用 HTML5 页 面 中 JavaScript 方 法 或 指 
令 ， 又 该 怎么 做 呢 ? 同样 地 ， 也 需要 先 使 用 JavaScript 在 HIML5 页 面 全 
局 中 声明 相对 应 的 方法 ， 这 就 有 点 类 似 于 Native 注 册 的 Scheme 协议 。 其 
中 ，Native 向 HIML5 发 起 的 调用 是 通过 loadUrl 方 法 (Android 平 台 下 面 
方法 名 为 loadUrl，iOS 系 统 下 通常 为 
stringByEvaluatingJavaScriptFromString ) 实现 的 ， 例 如 使 用 
webView.loadUrl("javascript: alert(hello ouven) ") ; 则 可 以 执行 HTML5 
页 面 的 alert 方 法 。 再 来 看 一 个 稍微 复杂 一 点 的 例子 。 





// 声明 webSettings 的 实例 

WebSettings webSettings = webView,getSettings( ) ; 

// 设置 WebView 内 可 执行 JavaScript 脚本 
webSettings.setJavaSscriptEnabled(true); 

// 加 载 页 面 带 WebView 中 
webView.1loadUrl("file:///android asset/index.html"); 
// 声明 JsInterface 实例 

JSInterface jsInterface = new JsIinterface(); 


jsIinterface.1log('hello ouven'); 


public class JsInterface { 


public void log(final String msg)t{ 
webView.post(new Runnable() { 
QOverride 


public void run() { 





// 1og 是 js 的 1og 方法 


webView.1loadUrl("javascript: log(" + "'" + msg + 


}); 


这 上 段 Java 代 码 中 ，Native 希 望 通 过 创建 一 个 新 线程 来 执行 页 面 
JavaScript 的 log 0 方法 ， 相 对 应 的 HTML5 页 面 可 按 如 下 方式 实现 在 全 局 
作用 域 声明 一 个 log0 方 法 供 Native 调 用 。 





<!-- index.html --> 
<1DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>demo</title> 
</head> 
<body> 
<script> 
// 在 页 面 中 声明 方法 
function log(msg)t 





console.1log(msg); 
} 
</script> 
</body> 
</html> 


采用 这 种 方法 便 可 以 实现 在 Native 中 调用 JsInterface 实 例 中 的 log0 方 
法 时 控制 WebView 在 页 面 中 打印 信息 。 相 信 对 大 家 来 说 应 该 很 容易 理 





总 结 来 看 ， 这 里 实现 交互 的 核心 方法 其 实 都 可 以 认为 是 通过 方法 注 
入 来 实现 的 ，Native 应 用 将 协议 注入 到 系统 Scheme， 或 将 Native 方 法 直 
接 注 入 到 页 面 的 全 局 变量 ， 反 之 也 可 以 在 HIML5 页 面 全 局 作用 域 中 添 
加 方法 ， 让 Native App 调 用 。 这 样 就 完成 了 前 病 与 Native App 的 相互 调 
用 。 





2.5.4 JSBridge 设 计 规 范 


了 解 Android 的 人 应 该 知道 ， 使 用 addJavaScriptInterface 在 Android 
4.2 以 下 版 本 会 有 一 些 安全 漏洞 。 例 如 ， 通 过 JavaScript 可 以 访问 当前 设 
备 SD 卡 上 面 的 任何 内 容 ， 甚 至 是 联系 人 信息 、 短 信 等 。 虽 然 Android 4.2 
以 上 的 版 本 可 以 通过 添加 @JavascriptInterface 的 方法 来 解决 安全 隐患 ， 
但 是 对 于 Android “4.2 以 下 的 版 本 就 得 考虑 其 他 的 实现 方式 了 。 笠 运 的 
是 ， 在 Android 上 ，JavaScript 还 可 以 通过 另 一 种 setWebChromeClient 方 法 
来 实现 : JavaScript 在 执行 WebView 中 JavaScript 的 alert0 或 promptO 方 法 
时 ，Native 端 会 自动 触发 onJsAlert 或 onJsPrompt 的 方法 回调 函数 ， 一 般 
情况 下 ， 因 为 前 端 需要 常常 使 用 alert(0) 方 法 ， 因 此 通过 重 写 Native 中 的 
onJsPrompt 方 法 ，JavaScript 就 可 以 通过 执行 promptO 方 法 把 数据 内 容 传 
递 到 Java 代 人 码 中 执行 ， 即 JavaScript 在 执行 prompt(O 方 法 时 将 数据 传 入 到 
Native 的 onJsPrompt 方 法 中 ， 而 onJsPrompt 里 则 是 我 们 重 写 的 调用 Native 
程序 代码 。 








// 设置 prompt 监听 
webView.setwebChromeClient(new WebChromeClient() { 


Q@Override 


public boolean onJsPrompt (WebView view, String url, String me 
JsPromptResult result) { 
result.confirm(JSBridge.callJsPpPrompt (MainActivity.this, v 


return true; 


}); 


同时 Java 也 可 以 主动 通过 loadUrlO 再 次 回调 JavaScript 的 方法 返回 内 
容 到 WebView 中 。 有 具体 需要 JavaScript 将 Native 调 用 所 需要 方法 的 名 称 、 
参数 和 Native 执 行 完 成 后 回调 JavaScript 的 方法 名 称 等 信息 都 传 给 


Native。 


以 Android 为 例 ， 目 前 使 用 较 多 的 解决 方案 是 通过 一 个 协议 串 定义 
Native 和 JavaScript 间 的 数据 通信 规则 : 
jsbridge://className:callbackMethod/methodName?jsonObj， 当 然 不 一 定 
需要 这 样 的 定义 ， 也 可 以 使 用 其 他 的 方式 ， 这 只 是 一 种 方法 。 无 论 如 
何 ， 这 个 协议 串 必 须 包括 以 下 内 容 : 调用 Native App 的 特定 标识 头 、 类 
名 称 、 方 法 名 、 参 数 、 回 调 JavaScript 的 方法 。 这 里 ，jsbridge 是 Native 注 
册 的 协议 头 ，className 对 应 的 是 调用 Native 的 类 ，methodName 是 指 调 
用 Native 类 中 具体 哪个 方法 ，jsonObj 则 是 指 JavaScript 调 用 Native 方 法 时 
传 入 的 参数 ，callbackMethod 为 回调 JavaScript 的 方法 名 称 ， 目 的 是 在 
JavaScript 调 用 Native 的 方法 成 功 后 异步 通过 loadUrl ('javascript: 
callbackMethod() ') 来 让 JavaScript 继 续 进 行 操作 。 








如 图 2-18 所 示 ， 以 Android 为 例 ， 我 们 需要 在 前 端 调用 Native 层 Util 
类 的 toString 方 法 ， 传 入 参数 为 msg， 调 用 成 功 后 执行 前 端 JavaScript 的 
success 方法 ， 传 入 的 协议 地 址 代码 如 下 。 


Jsbridge://Util:success/toString?{"msg":"hello ouven"} 


ative | 












使 用 prompt 传 入 协议 串 ; 
jsbridge://Util:success/toString?2{ msg” :hello 
ouven } 


执行 Util. toString () 


执行 回调 : loadUrl( javascript: success() ) 




















图 2-18 JSBridge 协 议 调用 方式 








这 时 ，Native 应 用 就 需要 实现 Util 类 的 toString 方 法 了 。 当 Native 应 用 
接收 到 jsbridge://Util:success/toString?{"msg": "hello ouven"} 协 议 串 时 便 
调用 Util.toString0 方 法 ， 完 成 后 还 要 调用 loadUrl ('javascript: success() 
) 方法 执行 前 问 的 回调 。 





声明 注册 较 多 的 类 和 方法 需要 花费 较 多 的 精力 而 且 较 难 管理 ， 所 以 
我 们 通常 硕 望 可 以 在 WebView 庙 使 用 一 个 通用 注册 接口 来 注册 我 们 可 能 
需要 使 用 到 的 所 有 类 和 方法 ， 例 如 JSBridge.register("jsName'"， 
javaClass.class)， 注 册 完 成 后 通过 某 个 JavaScript 全 局 对 象 来 管理 查看 ， 
以 供 Native 端 使 用 loadUrl 0 方法 来 调用 。 


JSBridge.call = function(className, methodName, params, callback) 
let bridgeStrindg ; 


let paramsString = JSON.stringify(params || {}); 


uu 


// 拼接 协议 
if (className && methodName) { 





bridgeString = “jsbridge://${className}:${callback} 
/${methodName}?${ paramsString }，; 
try { 
// 将 协议 串 发 送 给 Native 应 用 


sendToNative(bridgeString); 





} catch (e) { 
console.1log(e); 
4 
} else { 


console.1log('Invalid className or methodName' ); 


} 
// 发 送 协议 串 到 Native 


function sendToNative(uri, data) { 





window.prompt(uri, JSON.stringify(data || {})); 


此 处 ，JavaScript 执 行 时 也 使 用 类 似 上 面 的 JSBridge.call (className, 
methodName, params, callback) 来 调用 对 应 的 方法 。JSBridge.call() 方 法 做 
的 事情 很 简单 ， 将 传 入 的 参数 组 装 成 上 述 
jsbridge://className:callbackMethod/methodName?jsonObj 的 形式 ， 然 后 


调用 prompt 〈iOS 一 般 用 iframe，Android 建 议 使 用 window.prompt) 的 方 
法 将 协议 串 传 递 到 Native 应 用 层 解 析 执 行 ， 这 时 候 Native 层 会 收 到 这 个 
协议 串 ， 再 进一步 解析 并 调用 对 应 的 类 和 方法 名 称 ， 调 用 方法 成 功 后 执 
行 WebView 中 声明 的 callbackMethodO 函 数 ， 这 样 整个 交互 协议 调用 的 过 
程 就 完成 了 。 通 过 这 种 方式 ， 我 们 就 定义 了 前 端 与 Native 的 相互 调用 协 
DC 





2.6 本章 小 结 


本 章 主 要 为 大 家 介绍 了 与 前 端 相关 的 协议 ， 包 括 HITP 1.x、HTTP 
2、HTTPS、 安 全 协议 、WebSocket、Poll、Long-poll、RESTful 协 议 规 
范 以 及 在 Hybrid 应 用 中 前 端 与 Native 交 互 协 议 的 设计 。 下 一 章 中 ， 我 们 
将 正式 探讨 Web 相 关 的 前 端 技 术 ， 主 要 从 前 端 三 层 结构 及 其 演进 发 展 来 
展开 介绍 ， 让 大 家 对 前 端 基 础 技术 的 发 展 有 系统 的 把 握 。 





第 3 章 ，” 前端 三 层 结构 与 应 用 





相信 大 家 已 丝 了 解 了 前 端的 三 个 基本 构成 : 结构 层 HTML、 表 现 层 
CSS 和 行为 层 JavaScript。 





结构 层 HTML 现 在 已 经 发 展 到 HTML5 版 本 ， 而 在 实际 工程 项 目 中 ， 
HTML5 一 般 只 有 在 移动 端 页 面 开发 中 才 会 使 用 到 ， 桌 面 浏览 器 页 面 开 
发 时 由 于 兼容 性 原因 ， 使 用 的 虽然 是 HTML5 的 doctype 定 义 但 一 般 不 使 
用 HTML5 的 新 标签 规范 。 幸 运 的 是 ，HTML5 标 准 是 向 后 兼容 的 ， 
HTML4 版 本 的 绝 大 部 分 常用 标签 依然 可 以 继续 使 用 。 





对 于 表现 层 CSS， 我 们 从 CSS2 开 始 了 解 就 可 以 了 。 目 前 CSS3 已 经 
成 熟 ， 同 样 在 移动 端 浏 览 器 开发 时 使 用 ， 不 过 蝎 面 浏览 器 开发 时 也 会 使 
用 已 支持 的 部 分 CSS3 属 性 。 另 外 ，CSS4 的 草案 正在 制定 当中 ， 但 距离 
发 布 仍 有 一 段 时 间 。 


JavaScript 标 准 也 在 ECMAScript 5 发 布 后 经 历 了 几 年 的 波折 才 确 定 发 
布 了 新 版 本 。ECMAScript 6 于 2015 年 6 月 17 日 发 布 ，ECMAScript 7 标准 
也 于 2016 年 完成 发 布 ， 目 前 ECMAScript 6+( 泛 指 ECMAScript 6 及 以 上 
版 本 ) 已 经 成 为 新 的 JavaScript 标 准 规范 正在 被 广泛 使 用 。 同 时 ， 这 一 标 
准 的 确定 也 让 现代 前 端的 三 层 结构 有 了 更 加 明确 的 新 定义 。 





此 外 我 们 也 需要 了 解 的 是 ， 前 端 三 层 结 构 是 基础 。 现 代 的 Web 前 端 
应 用 开发 早已 经 不 是 简单 的 三 层 结构 就 能 轻松 解决 的 了 ， 而 是 已 经 形成 
了 编译 流程 化 、 生 产 环境 基础 优化 结构 运行 的 模式 。 简 单 来 讲 ， 例 如 





HTML 开 发 可 以 由 Component (实现 的 形式 较 多 ， 例 如 Web 

Component、 目 录 级 Component、 其 他 框架 自 定义 形式 的 Component) 来 
管理 结构 ，CSS 由 SASS、postCSS、stylus 等 预 处 理 器 的 语法 开发 来 代 
替 ，JavaScript 则 使 用 ECMAScript 6+、TypeScript 等 特性 标准 进行 高 效 开 
发 。 这 些 就 是 目前 主要 的 前 端 开 发 技术 ， 其 主要 过 程 是 开发 完成 后 将 开 
发 项 目 管理 的 三 层 结构 内 容 编译 输出 为 浏览 器 支持 运行 的 基础 三 层 结构 
解释 执行 。 为 什么 会 有 这 么 多 复杂 的 东西 出 现 呢 ? 主要 是 对 效率 的 需 
求 ! 通过 更 高 效 的 工具 来 快速 开 友 和 管理 复杂 的 应 用 项 目 ， 最 后 编译 为 
基础 结构 运行 是 因为 仍然 有 旧 的 浏览 器 需要 兼容 。 如 果 某 一 天 所 有 浏览 
器 都 直接 支持 Component、ECMAScript 6+、SASS 等 ， 那 就 进入 了 浏览 
器 直接 解释 运行 的 时 代 ， 不 需要 自己 再 转译 了 。 
































目前 端 技 术 诞生 以 来 ， 就 一 直 保持 着 较 快 的 发 展 速度 。 同 时 ， 前 咒 
技术 的 快速 发 展 对 前 端 工 程 师 的 要 求 也 越 来 越 高 。 无 论 怎样 ， 因 为 对 效 
率 需 求 迫 切 ， 现 代 前 问 的 编译 开发 扩 术 已 经 成 为 了 主流 。 这 一 草 ， 我 们 
将 重点 来 学 习 现 代 前 端 三 层 结构 的 演进 历程 以 及 如 何在 三 层 结构 的 基础 
之 上 进行 高 效 开 发 。 








3.1 HTML 结 构 层 基础 


3.1.1 ”必须 要 知道 的 DOCTYPE 


提 到 DOCTYPE， 我 们 不 妨 先 从 HTML 4.01 开 始 讲 起 。HTML 4.01 
是 w3C 在 1999 年 制定 发 布 的 HTML 语言 规范 。 要 知道 的 是 ，HTML4.01 
是 基于 SGML (Standard Generalized Markup language， 标 准 通用 标记 语 
言 ) 规范 来 制定 的 。HITML5 正 式 发 布 于 2014 年 ，HTML5 不 是 基于 
SGML 演 化 而 来 的 ， 可 以 理解 为 是 W3C 的 另 一 套 实 现 规范 。HTML5 向 
后 兼容 了 绝 大 多 数 低 版 本 的 HTML 元 素 标签 ， 并 添加 了 新 的 元 素 标签 ， 


例如 <header>、<nav>、<footer>、<section>、<video>、<audio> 等 。 


另外 ， 虽 然 目 前 几乎 所 有 浏览 器 均 支 持 以 HTML5 的 方式 声明 文档 
类 型 ， 即 <!IDOCTYPE html>， 但 并 不 代表 HTML5 的 新 标签 元 素 就 可 以 
在 这 些 浏览 器 上 正常 解析 ， 这 是 因为 DOCTYPE 声 明 只 用 于 指示 Web 浏 
览 器 页 面 使 用 哪个 HTML 版 本 编写 的 指令 进行 解析 ，<!DOCTYPE html> 
的 定义 兼容 所 有 HTML 的 历史 版 本 和 最 新 的 HTML5 版 本 ， 不 文 持 
HTML5 中 的 DOCTYPE 定 义 的 浏览 器 仍然 会 使 用 HTML 4.01 等 历史 版 本 
的 兼容 模式 来 进行 文档 解析 。 





SGML 的 规范 很 多 ， 所 以 我 们 以 前 使 用 HTML 开 发 页 面 时 需要 对 
文档 类 型 定义 (Document Type Difinition，DTD) 进 行 声 明 ， 即 
在 DOCTYPE 后 面 声 明 DTD 的 定义 ， 不 同 的 文档 DTD 会 指示 浏览 器 以 





不 同 的 文档 模式 来 解析 HTML 文 本 。 如 果 DOCTYPE 不 存在 或 格式 不 
正确 ， 则 会 导致 文档 以 兼容 模式 呈现 ， 这 时 浏览 器 会 使 用 较 低 的 浏览 
器 标准 模式 来 解析 整个 HTML 文 本 。 如 果 定 义 了 标准 模式 运行 ， 例 如 
<IDOCTYPE html PUBLIC"/W3C/DTD XHIML 1.1/EN" 
"http:/www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 或 <!IDOCTYPE 
HTML PUBLIC"-/W3C/DTD HTML 4.01/EN" 
"http:/www.w3.0rg/TR/html4/strict.dtd">， 那 么 这 时 浏览 器 DOM 泻 染 和 
JavaScript 的 运作 模式 都 是 以 该 浏览 右 支 持 的 最 高 标准 来 解析 执行 的 。 











HTML 最 早 从 XML 衍生 而 来 ， 目 前 已 经 进入 HTML5 成 熟 阶 段 。 要 
了 解 的 是 ，HTML5 不 是 基于 SGML 的 ， 不 需要 对 DTD 进 行 定 义 。 实 际 上 
我 们 可 能 早已 不 再 使 用 旧版 本 的 声明 模式 了 ， 但 还 是 有 必要 了 解 其 中 的 





3.1.2 Web 语义 化 标签 


首先 给 出 Web 语 义 化 标准 的 定义 : Web 语 义 化 是 指 在 HTML 结构 的 
恰当 位 置 上 使 用 语义 恰当 的 标签 ， 使 页 面具 有 民 好 的 结构 ， 使 页 面 标签 
元 素 具 有 含义 ， 能 够 让 人 或 搜索 引擎 更 容易 理解 。 











基于 此 定义 ， 我 们 需要 首先 理 解 以 下 几 点 。 


o 用 正确 的 标签 做 正确 的 事情 。 例 如 ， 在 列表 的 地 方 要 使 用 列表 
元 素 ， 文 章 内 容 中 要 使 用 段落 或 文章 标签 ， 杜 绝 HIML 结 构 全 
部 使 用 <div> 元 素来 符 套 实现 ， 因 为 <div> 是 没有 任何 语义 的 ， 
仅 代 表 一 个 元 和 聚 容 器 块 。 





<!-- 不 推荐 --> 

<div class="ui-menu-l]ist"> 
<div class="menu-1list-item"> 列 表 一 </div> 
<div class="menu-1list-item"> 列 表 二 </div> 
<div class="menu-1list-item"> 列 表 三 </div> 


</div> 


<!-- 推荐 --> 

<ul class="Uui-menu-list"> 
<1i class="menu-1list-item"> 列 表 一 </1i> 
<1i class="menu-1list-item"> 列 表 二 </1i> 
<1i class="menu-1list-item"> 列 表 三 </1i> 


</ul> 


o HTML 语 义 化 能 让 页 面 内 容 更 具 结 构 化 昌 更 加 清晰 ， 便 于 浏览 
器 和 搜索 引擎 进行 解析 ， 因 此 在 兼容 条 件 下 ， 要 尽量 使 用 带 有 
语义 化 结构 标签 。 例 如 ，HTML5 中 定义 <header>、<nav>、 
<footer>、<section>、<article> 等 标签 的 内 容 会 被 搜索 引擎 解析 
收录 ， 能 够 提高 页 面 内 容 关 键 字 的 搜索 排行 。 





图 3-1 为 HTML5 语 义 化 结构 标签 的 一 个 典型 的 应 用 场景 ， 目 前 使 用 
也 很 广泛 。 根 据 标签 就 能 理解 元 聚 里 面 的 大 致 内 容 功 能 ， 这 样 自 然 比 所 
有 的 元 素 都 用 <div> 来 写 更 容易 理解 。 


<Nav> 


<aside> <article> 





<footer> 


图 3-1 HTML5 部 分 语义 化 结构 元 素 标签 





<!-- 不 推荐 div 布局 方式 --> 
<1DOCTYPE html> 

<htm] lang="en"> 

<head> 


<meta charset="UTF-8"> 





<title> 页 面 结 构 </title> 
</head> 
<body> 
<div id="header"> 
页 面 汰 音 
</div> 
<div id="main"> 
正文 内 容 


</div> 


<div id="footer"> 
页 面 底部 
</div> 
</body> 
</html> 





<!-- 推荐 语义 化 结构 - -> 
<1DOCTYPE html> 
<htm] lang="en"> 
<head> 


<meta charset="UTF-8"> 





<title> 页 面 结构 </title> 
</head> 
<body> 
<header> 
页 面 头 部 
</header> 
<article> 
正文 内 容 
</article> 
<footer> 
页 面 底部 
</footer> 
</body> 
</html> 








o 即使 在 没有 样式 CSS 的 情况 下 ， 网 页 内 容 也 应 该 是 有 序 的 文档 


格式 显示 ， 并 且 是 容易 阅读 的 。 


一 般 情 况 下 ， 具 有 民 好 Web 语 义 化 的 页 面 结构 在 没有 样式 文件 的 情 
况 下 也 是 能 够 阅读 的 ， 例 如 列表 会 以 列表 的 样式 展现 ， 标 题 文 字 会 加 
粗 ， 而 不 是 全 部 内 容 都 以 无 层次 的 文本 内 容 形 式 呈 现 。 如 图 3-2 所 示 ， 
左边 是 使 用 语义 化 标签 实现 的 页 面 结构 ， 而 右边 则 是 全 部 使 用 div 布 局 
实现 的 页 面 结构 ， 显 然 ， 使 用 语义 化 标签 的 页 面 结构 在 没有 样式 的 情况 
下 更 容易 理解 。 


页 面 标题 


页 面 底部 


页 面 底 部 





图 3-2 语义 化 结构 页 面 与 非 语 义 化 结构 页 面 对 比 





o 使 项 目 维护 人 员 更 容易 对 网 站 进行 分 块 ， 便 于 阅读 理解 。 语 义 
化 的 标签 使 用 ， 能 让 开发 者 更 容易 区 分 标签 元 素 中 的 内 容 ， 例 
如 ，<nav> 一 般 是 导航 采 单 的 结构 ，<article> 则 用 于 存放 页 面 的 
文章 内 容 ， 更 加 易于 后 期 的 维护 ， 而 全 部 使 用 <div> 来 实现 就 
不 是 那么 容易 区 分 了 。 





理解 了 以 上 几 上 点， 我 们 再 来 看 看 HTML 主 要 标签 的 设计 。CSS 规 范 
规定 : 每 个 标签 元 素 都 是 有 display 属 性 的 。 所 以 根据 标签 元 素 的 display 
属性 特点 ， 可 以 将 HTML 标 签 分 为 以 下 几 类 。 








o 行内 元 素 : 包括 <a>、<b>、<span>、<img>、<input>、 
<button>、<select>、<strong> 等 标签 元 素 ， 其 默认 宽度 是 由 内 
容 宽度 决定 的 。 


o ， 块 级 元 素 : 包括 <div>、<ul>、<ol>、<li>、<dl>、<dt>、 
<dd>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、 
<table> 等 标签 元 素 ， 其 默认 宽度 为 父 元 素 的 100%。 


o 各 见 空 元 素 : 例如 <br>、<hr>、<link>、<meta>、<area>、 
<base>、<col>、<command>、<embed>、<keygen>、 
<param>、<Ssource>、<track> 等 不 能 显示 内 容 甚 至 不 会 在 页 面 
中 出 现 ， 但 是 对 页 面 的 解析 有 着 其 他 重要 作用 的 元 素 。 


这 些 标签 大 部 分 是 有 具体 含义 的 ， 具 有 其 适用 的 场景 。 例 如 ， 
hl~h6 是 表示 标题 的 标签 元 素 ，u、ol、dQl 分 别 表示 无 序 、 有 序 、 带 标题 
描述 的 列表 。 而 且 HTML5 中 加 入 的 新 标签 也 基本 是 带 语 义 化 的 。 








除 此 之 外 ， 合 理 的 标签 使 用 能 够 让 搜索 引擎 更 容易 获取 页 面 的 主要 
内 容 ， 提 升 权 重 。 例 如 ， 页 面 中 <h1> 标 题 元 素 里 面 的 文字 就 比 <div> 标 
签 元 素 里 面 的 文字 更 重要 ， 会 更 容易 被 搜索 引擎 记录 下 来 ， 并 认为 是 对 
页 面 描述 更 有 用 的 内 容 《〈 这 个 在 后 面 章节 中 会 具体 讲解 ) 。 所 以 我 们 在 
设计 HIML 结 构 时 要 尽量 注意 语义 化 的 使 用 。 























3.1.3_ HTML 糟糕 的 部 分 


或 许 没有 人 告诉 过 你 ，Web 语 义 化 规范 并 不 是 在 任何 时 候 都 需要 严 
格 遵守 的 ， 有 时 直接 使 用 甚至 会 产生 一 些 副作用 。 例 如 在 桌面 浏览 器 应 
用 开发 时 ， 若 页 面 标签 结构 中 使 用 了 HTML5 的 新 语义 化 标签 可 能 会 导 
致 这 些 标签 无 法 直接 解析 ， 所 以 考虑 到 兼容 性 ， 我 们 最 终 仍然 需要 使 用 
<div> 来 代替 ， 另 外 我 们 或 许 也 会 考虑 使 用 html5.js 来 进行 特殊 解析 ， 但 
是 这 样 在 部 分 版 本 的 浏览 器 中 ， 页 面 的 解析 就 变 得 较 慢 了 。 








<!IDOCTYPE html> 
<htm] lang="en"> 
<head> 


<meta charset="UTF-8"> 





<title> 页 面 结 构 </title> 
<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/htmls. 
< ![endif]--> 
</head> 
<body> 
<header> 
页 面 头 部 
</header> 
<article> 
正文 内 容 
</article> 
<footer> 
页 面 底部 
</footer> 


</body> 


</html> 


关于 前 端 标 俭 元 素 或 特性 的 兼容 性 ， 我 们 一 般 可 以 通过 访问 
http:/Wcaniuse.comy/ 来 查询 。 


再 如 页 面 中 使 用 <table> 这 个 语义 化 标签 是 会 导致 内 容 渔 染 较 慢 的 ， 
为 <table> 里 面 的 内 容 泻 染 是 等 表格 内 容 全 部 解析 完 生成 泻 染 树 后 一 次 
性 这 染 到 页 面 上 的 ， 如 果 表 格 内 容 较 多 ， 就 可 能 产生 演 染 过 程 较 慢 的 问 
题 ， 因 此 我 们 第 第 需要 通过 其 他 的 方式 来 模拟 <table> 元 素 ， 例 如 使 用 无 


序列 表 来 模拟 表格 。 





<section class="ui-table"> 
<ul class="ui-table-list row"> 
<11 class="table-cell table-title"> 单 元 格 标题 一 </1i> 


<11 class="table-cell table-title"> 单 元 格 二 </1i> 
<11 class="table-cell table-title"> 单 元 格 三 </1i> 


</ul> 


<ul class="ui-table-list row"> 
<1i class="table-cell1"> 单 元 格 一 </1i> 
<li class="table-cell"> 单 元 格 二 </1i> 
<li class="table-cell"> 单 元 格 三 </1i> 


</ul> 


<ul class="ui-table-list row"> 


<li class="table-cell"> 单 元 格 一 </1i> 

<]li class="table-cell"> 单 元 格 二 </1i> 

<li class="table-cell"> 单 元 格 三 </1i> 
</U]> 


</section> 


除了 <table> 元 素 的 性 能 问题 ，HTML 中 还 有 一 些 糟糕 的 设计 需要 我 
们 注意 ， 例 如 你 可 以 任意 编写 HTML 髓 套 结构 ， 并 能 够 在 任何 位 置 使 用 
任何 元 素 ， 也 可 以 通过 内 联 CSS 来 改变 HTML 的 任何 样式 属性 ， 甚 至 
HTML 标签 随意 写 或 者 CSS 属 性 使 用 错误 都 不 会 报错 。 这 样 承 比较 糟糕 
了 ， 增 加 了 很 多 犯错 的 可 能 性 。 


所 以 我 们 编写 HTML 时 尤其 需要 注意 这 些 问题 ， 下 面 来 看 几 个 常见 
的 HTML 标 签 使 用 的 粮 料 场景 。 








<!-- <img> 元 素 标签 可 以 不 用 写 alt 或 title， 也 能 正常 显示 --> 





<img src="photo.jpg"/> 











<1- - <a> 元 素 标签 可 以 不 写 href 属性 ， 不 过 这 样 容易 出 现 问题 。 即 使 添加 块 级 元 素 二 
浏览 器 解析 后 会 发 生 位 置 偏 移 ， 如 果 出 了 问题 将 很 难 定位 - -> 


<a><h2></h2></a> 





























<!1-- 并 不 是 所 有 的 标签 都 是 带 有 语义 化 的 ，<div>、<i> 就 是 比较 典型 的 例子 ， 所 以 尽 1 
加 文字 ， 实 际 项 目 开 发 中 ， 我 们 常常 把 <i> 元 素 标签 当 作 页 面 上 的 icon 图 标 标签 来 使 月 


<div></div> 























<i></i> 





让 











<!-- 尽管 HTML 规范 提供 了 有 语义 化 的 列表 元 素 ， 但 我 们 仍然 可 以 用 下 面 这 种 方式 来 和 











mo 妥 二 
正常 显示 --> 





<div> 
<span class="1list-item">1</span> 
<span class="1list-item">2</span> 
<span class="1list-item">3</span> 


</div> 











<1-- 元 素 中 可 以 使 用 内 联 样 式 ， 当 然 这 是 旧版 本 的 历史 问题 ， 元 素 样式 里 面 随意 添加 
生效 且 不 会 报错 ; 加 入 display:relative; 也 不 会 提示 错误 ， 但 relative 并 不 是 


<div style="width:100px;height:30px;top:1i0px;display:relative;">< 

















<!-- HTML 定义 了 table 元 素 , 但 table 是 一 次 性 演 染 的 ， 如 果 表 格 内 容 较 长 就 


<table> 





<thead>table list</thead> 

<tr> 
<th>list 1</th> 
<th>list 2</th> 
<th>list 3</th> 

</tr> 

<tr> 
<td>list 1</td> 
<td>list 2</td> 
<td>list 3</td> 


</tr> 


<tr> 


<td>list n</td> 


<td>list n+1</td> 
<td>list n+2</td> 
</tr> 
</table> 
<!-- 表单 输入 项 内 容 不 写 label 也 是 没 问题 的 ，<label> 可 以 定义 与 表单 控件 间 的 六 
览 右 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。--> 


Date:<input type="text" name="name"/> 




















<1-- 还 有 一 些 很 不 合理 的 标签 ， 新 的 标准 已 经 将 它们 弃 用 了 --> 
<blink></blink> 











<marquee></magquee> 


<stike></strike> 


<img> 标 签 的 alt 属 性 和 title 属 性 是 有 区 别 的 ，alt 属 性 一 般 表示 图 
片 加 载 失败 时 提示 的 文字 内 容 ，title 属 性 则 指 鼠 标 放 到 元 素 上 时 显示 
的 提示 文字 。 在 页 面 结构 书写 中 ， 我 们 第 用 title 来 提示 一 些 省 略 掉 的 
文字 的 全 部 内 容 。 例 如 <p ”tile=" 这 是 一 段 很 长 的 文字 ， 包 含 很 多 内 
容 "> 这 是 一 段 很 长 的 文字 ...</p>， 这 样 在 页 面 中 可 能 只 展示 部 分 文 
字 ， 但 用 户 可 以 通过 鼠标 提示 看 到 这 段 文字 的 完整 内 容 ， 这 对 于 提高 
页 面 用 户 体验 是 很 有 帮助 的 。 











很 显然 ， 这 些 糟糕 的 设计 不 仅 降低 了 页 面 可 读 性 ， 拖 慢 了 页 面 性 
能 ， 不 利于 SEO， 而 且 误 导 了 初学 者 对 HTML 的 理解 使 用 ， 更 有 可 能 让 
我 们 在 已 经 出 错 的 情况 下 找 不 到 错误 的 原因 和 方向 。 因 此 ， 我 们 必须 想 
办 法 尽 可 能 避免 这 些 问题 的 发 生 。 其 中 的 一 种 思路 是 ， 借 助 现代 开发 工 


具 插 件 或 构建 工具 插件 来 分 析 上 面 HTML 页 面 中 编码 糟糕 的 地 方 ， 例 如 
发 现 内 容 里 有 行内 元 素 里 仍 套 了 块 级 元 素 时 ， 就 通过 插件 分 析 报 错 来 畏 
助 我 们 进行 正确 的 书写 开发 。 辅 助 工具 可 以 提示 一 部 分 问题 ， 但 并 非 所 
有 的 问题 都 能 得 到 解决 。 另 一 方面 ， 如 果 我 们 想 让 HIML 的 结构 进一步 
优化 提升 ， 可 以 考虑 尝试 AMP HIML。 


3.1.4 AMP HTML 


流动 网 页 提速 (Accelerated Mobile Pages，AMP) 是 google 推 行 的 
一 个 提升 页 面 资源 载 入 效率 的 HTML 提 议 规范 。 基 本 思路 有 两 点 : 使 用 
严格 受 限 的 高 效 HTML 标 签 以 及 使 用 静态 网 页 缓存 技术 来 提高 网 络 访问 
静态 资源 的 性 能 和 用 户 体验 。 也 就 是 说， 尽量 避免 使 用 目前 网 页 上 演 染 
或 展示 性 能 比较 差 的 标签 ， 并 将 部 分 网 页 静态 内 容 缓存 到 页 面 上 进行 分 
发 ， 例 如 内 联 体积 较 小 的 样式 和 图 片 、 延 时 加 载 较 大 的 静态 资源 文件 
等 ， 进 而 提高 网 页 的 初始 载 入 速度 。 


AMP 提 议 中 包含 了 一 部 分 网 页 问 优 化 的 内 容 ， 前 端 网 页 优化 我 们 都 
己 经 做 过 了 ， 在 此 着 重 来 看 AMP 的 第 一 部 分 。 使 用 受 限 的 HTML 标签 来 
进行 AMP ”HIML 提 升 ， 这 只 是 一 个 规范 提议 ， 不 涉及 任何 一 项 具体 的 
技术 ， 例 如 在 AMP 中 ，<img>、<video>、<audio>、<embed>、 
<form>、<table>、<frame>、<object>、<iframe> 这 类 较 慢 或 可 能 影响 页 
面 内 容 泻 染 的 标签 是 不 建议 被 直接 使 用 的 ， 因 为 它们 常常 在 页 面 元 素 解 
析 时 就 要 去 做 较 慢 的 泻 染 或 者 会 立即 直接 下 载 src 或 param 等 属性 里 面 的 
内 容 。<video> 标 签 载 入 解析 时 会 去 直接 请 求 src 里 面 的 资源 内 容 ， 这 样 
就 占用 了 浏览 器 的 下 载 线 程 ， 阻 塞 了 页 面 关键 资源 的 下 载 ， 所 以 我 们 可 
以 将 这 些 元 系 需 要 加 载 的 资源 先 缓存 到 HTML 结 构 中 ， 等 页 面 主体 结构 





泻 染 完 成 后 再 去 加 载 ， 类 似 懒 加 载 ， 不 同 的 是 AMP HTML 是 通过 自 定 
义 元 素 完 成 Component 来 实现 的 ， 懒 加 载 则 是 通过 JavaScript 直 接 在 网 页 
中 操作 实现 。 


浏览 器 同一 个 域名 的 最 大 并 行 下 载 线程 个 数 是 有 限 的 ， 所 以 我 们 
第 常 要 先 加 载 页 面 的 关键 性 展示 资源 ， 延 后 加 载 页 面 脚本 类 资源 或 页 
面 的 非 关 键 性 图 片 资源 。 一 般 浏览 器 (IE8 以 上 ) 对 同一 个 域名 下 的 
资源 最 多 文 持 4 一 6 个 并 行 下 载 数 ， 所 以 为 了 增 大 资源 下 载 并 行 数 ， 我 
们 常常 将 HTML、JavaScript、CSS、 图 片 资 源 分 域 存放 。 分 域 也 可 以 
将 静态 资源 请 求 进行 服务 器 问 的 负载 均衡 ， 并 对 请 求 中 的 cookie 信 息 
进行 隅 离 ， 因 为 跨 域 请 求 默认 是 不 带 Cookie 的 ， 这 样 便 减 小 了 
JavaScript、CSS、 图 所 等 资源 的 请 求 头 部 信息 大 小 ， 从 而 提升 了 请 求 
的 解析 速度 。 





<amp-video width="400" height="300" src="http://www.domain.com 


poster="path/poster.jpg"> 
<div fallback> 
<p>Your browser doesn’t support HTML5 video</p> 
</div> 
<source type="video/mp4" src="myvideo.mp4"> 
<source type="video/webm" src="myvideo.webm"> 


</amp-video> 


这 里 是 AMP 标 签 <amp-video> 的 一 个 例子 ，AMP HTML 提 出 了 一 个 
可 选 的 实现 方案 就 是 通过 添加 自 定义 元 素来 代 谷 AMP 规 范 限 制 的 元 素 ， 





即使 用 <amp-video>、<amp-img>、<amp-audio>、<amp-pixel> 等 来 做 页 
人 其 实 本 质 上 这 类 标签 的 逻辑 封装 实现 和 

步 加 载 有 点 类 似 。 同 样 ，JavaScript 的 脚本 使 用 也 被 严格 限制 或 做 了 类 
es, 通过 完全 异步 加 载 的 方式 来 改变 和 优化 页 面 上 资源 的 加 载 顺 
序 ， 保 证 整体 页 面 内 容 能 尽快 完成 加 载 泻 染 。 根 据 AMP 团 队 测试 ， 通 过 
AMP 规 范 优 化 后 的 网 页 载 入 速度 可 以 提升 15% 一 859%， 那 么 在 海量 用 户 
请 求 访问 的 情况 下 ， 这 就 很 有 价值 了 。 





但 这 后 似乎 和 HTML 设 计 的 初 囊 相 背 离 ， 也 不 是 Web 语 义 化 所 提倡 
的 ， 为 外 HTML 不 同 元 素 在 设计 时 本 里 效率 是 各 不 相同 的 ， 如 果 让 效率 
较 高 的 元 素来 代 答 其 他 慢 元 素 的 高 频率 泻 染 ， 这 样 AMP HTML 的 优势 
就 可 以 体现 出 来 了 。 总 结 来 看 ， 使 用 AMP 提 升 页 面 性 能 的 基本 的 原则 如 
下 5 








o 只 人 允许 异步 的 Script 脚本 

o 只 加 载 静态 的 资源 

o 不 能 让 内 容 阻塞 泻 染 

o 不 在 关键 路 径 中 加 载 第 三 方 JavaScript 
o 所 有 的 CSS 必 须 内 联 

o 字体 使 用 声明 必须 高 效 

o 最 小 化 样式 声明 


o ， 只 运行 GPU 加 速 的 动画 


o 处理 好 资源 加 载 顺序 问题 

o 页 面 必须 立即 加 载 

o 提升 AMP 元 素性 能 

以 下 是 一 个 最 简单 的 AMP HTML 例 子 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<link rel="canonical" href="hello-world.html"> 
<meta name="viewport" content="width=device-width,minimum-sca 
<style amp-boilerplate> 
body { 
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 norma 


animation: -amp-start 8s steps(1, end) 0s 1 normal both ; 


@-webkit-keyframes -amp-start { 
from { 
visibility: hidden; 
} 
to { 


visibility: visible; 


@keyframes -amp-start { 
from { 
visibility: hidden; 
} 
to { 


visibility: visible; 


} 
} 
</style> 
<noscript> 
<style amp-boilerplate> 
body { 
-webkit-animation: none; 
-moz-animation: none; 
-ms-animation: none,; 
animation: none; 
} 
</style> 
</noscript> 


<script async src="https://cdn.ampproject.org/voO.js"></script 
</head> 
<body>Hello World!</body> 
</html> 


这 里 所 说 的 “ 快 * 其 实 并 不 是 单纯 指 页 面 泻 染 速度 快 ， 还 包括 将 可 


以 异步 或 延 后 的 泻 染 操作 延 后 ， 在 保证 用 户 体 验 不 降低 的 情况 下 尽早 
展示 关键 性 内 容 。 


上 面 这 段 代 码 使 用 了 页 面 动画 的 加 速 ， 通 过 noscript 和 async 等 异步 
的 方式 载 入 CSS 和 JavaScript 内 容 ， 让 HITMEL 尽 可 能 快 地 完成 泻 染 解 析 。 
其 实 AMP HTML 标 签 的 实现 原理 可 以 理解 为 采用 上 自 定 义 的 快 加 载 标 签 
元 素 ( 标 签 资源 内 容 延 后 加 载 的 元 素 ) 来 代 蔡 慢 加 载 标签 元 素 〈 标 签 资 
源 内 容 立 即 加 载 的 元 素 ) 。 举 个 例子 ， 假 如 网 页 中 的 元 素 分 两 类 : 快 元 
素 <F> (fast 元 素 ) 和 慢 元 素 <S> (slow 元 素 ) 。<F> 类 元 素 比 <S> 类 元 素 
的 解析 执行 时 间 短 80% (这 是 完全 有 可 能 的 ) ， 即 平均 一 个 <S> 元 素 要 
用 4 个 <F> 元 素 代 蔡 。 如 果 现 在 页 面 上 <F> 和 <S> 类 元 素数 量 各 为 50%， 

要 完全 使 用 <F> 类 元 素 代替 ， 那 么 页 面 载 入 效率 提升 比例 为 1- 
(50%+50%*4(1-80%))=10%， 这 是 一 个 很 明显 的 提升 ， 而 <F> 类 元 素 则 
可 能 是 AMP HTML 定 义 的 <amp-table> 的 实现 ， 用 来 解决 <table> 元 素 慢 
的 问题 。 显 然 这 种 思路 在 可 行 性 和 AMP 团 队 的 实践 结果 上 面 都 是 很 有 意 
义 的 ， 而 且 已 经 在 Google、Facebook 网 站 上 优化 推行 了 。 

















而 如 果 需 要 在 实际 项 目 中 去 推行 也 比较 简单 ， 按 照 AMP 标 签 规范 去 
开发 业务 组 件 (也 就 是 AMP HTML Component) 就 可 以 了 。 所 以 一 个 简 
单 的 场景 ， 例 如 我 们 常用 列表 元 素来 代 蔡 <table> 内 容 或 者 图 片 的 懒 加 载 
实现 ， 某 种 意义 上 就 和 AMP 的 思想 是 一 致 的 。 


参考 资料 : https:Wwww.ampproject.org/。 


3.2 前端 结构 层 演 进 
3.2.1 XMLS HTMIL 倍 述 


可 扩展 标记 语言 (Extentsible Markup Language，XML ) 是 用 来 描 
述 网 络 上 存储 数据 的 一 种 特殊 文本 标记 格式 。 它 是 在 SGML 的 基础 上 演 
化 而 来 的 ，XML 推 荐 使 用 一 对 闭合 标签 的 形式 来 描述 数据 的 名 称 ， 这 
对 闭合 标签 里 面 的 内 容 则 表示 对 应 的 值 ， 同 时 XML 规定 任何 一 个 开始 
的 标签 必须 与 一 个 结束 标签 配对 ， 人 否则 将 不 能 按照 正确 的 XML 结构 解 
析 ， 而 且 标 签 之 间 可 以 舱 套 。 我 们 通过 一 段 XML 声 明 便 可 以 使 用 标签 
区 套 来 书写 描述 信息 了 ， 代 码 如 下 。 


<?xml1 version="1.0" encoding="ISO0-8859-1"?> 
<info> 
<name>George</to> 
<job>engineer</job> 
<address> 
<country>China</country> 
<city>Shenzhen</city> 
</address> 
<website>http://www.jixianqianduan.com</website> 


</info> 


HTML 则 是 从 SGML 的 基础 上 演化 而 来 的 另 一 种 文本 标记 语言 ， 一 
般 用 于 网 络 上 数据 的 展示 。 相 比 而 言 ，XML 更 偏向 于 存储 数据 ， 例 如 





我 们 熟知 的 SQLite 数 据 库 ， 其 底层 数据 就 是 通过 XML 存储 在 硬盘 上 的 。 
而 HTML 则 偏重 于 将 数据 读 取出 来 装载 到 浏览 器 中 展示 给 用 户 。 从 语法 
规则 的 定义 上 来 看 ，XML 与 HTML 之 间 没 有 必然 的 联系 ， 它 们 是 针对 不 
同 的 应 用 场景 而 设计 的 。 从 语法 使 用 上 来 看 ，XML 的 灵活 度 更 高 ， 我 
们 可 以 目 定 义 任 意 名 称 的 标签 来 使 用 XML， 而 HTML 则 是 具有 一 定 规范 
约束 的 ， 例 如 只 有 特定 的 HIML 标 签 才 能 被 浏览 器 识别 。 


前 面 讲 过 ，HTML ”4.01 是 W3C 在 1999 年 制定 发 布 的 HTML 语 言 规 
范 ， 而 HIML5 到 2014 年 才 正 式 有 发布， 在 这 期 间 我 们 可 以 认为 页 面 的 续 
构 主 要 是 通过 <div> 来 实现 的 ， 曾 经 我 们 甚至 一 度 认 为 前 端 页 面 技术 就 
是 CSS + DIV 技术 ， 当 然 这 是 在 前 端 技术 发 展 早期 ，HIML 的 元 素 主 要 
分 为 行内 、 块 级 和 常见 空 元 素 几 类 。 











HTML5 是 HIML 的 第 5 个 版 本 ， 但 它 不 是 基于 SGML 语 言 演化 而 
来 ， 而 是 wW3C 完 全 上 自 定 义 的 一 套 标 准 规范 。 它 向 后 兼容 了 低 版 本 的 
HTML 4.01 的 绝 大 多 数 标签 ， 并 添加 了 更 多 语义 化 标签 ， 例 如 
<header>、<nav>、<footer>、<section>、<video>、<audio> 等 。 需 要 知 
道 的 是 ， 尺 管 HTML5 包 含 了 绝 大 多 数 的 低 版 本 HTML 标 签 ， 但 是 在 浏览 
器 解析 时 的 <DOCTYPE html> 声 明 中 是 不 需要 文档 类 型 定义 的 。 目 前 尊 
循 W3C 标 准 的 浏览 器 均 默 认 支 持 使 用 HTML5 的 DOCTYPE 定 义 解 析 ， 如 
果 不 文 持 则 默认 使 用 低 版 本 兼容 模式 来 解析 。 








3.2.2 HTML5 标 准 


HTML5 增 加 了 较 多 新 的 语义 化 标签 ， 同 时 对 应 的 BOM 对 象 和 和 DOM 
对 象 也 添加 了 相应 的 API， 目 前 由 于 移动 端 浏览 器 内 核 具 有 相对 较 好 的 
统一 性 和 兼容 性 ， 所 以 HTML5 主 要 用 于 移动 端 页 面 的 开发 。 我 们 先 来 





看 一 下 HTML5 带 来 的 有 语义 化 的 元 素 标签 。 根 据 HITML5 新 规范 深 加 的 
标签 ， 总 结 起 来 可 以 分 为 以 下 几 类 ， 如 表 3-1 所 示 。 














表 3-1 HTML5 新 增 元 素 类 型 


HITIMLS 





<header></header> <div id="header"></div> 





<object type="video/ogg" data=" 
</object> 


<video src= "movie.0gg">< /video> 





<source /> <param name="" value=""/> 


<article></article> <p></p> 





<time></time> <span></span> 





<datalist></datalist> Combox 





<progress></progress> DOIIe 





<command/> none 


我 们 也 可 以 用 HTML5 之 前 版 本 的 标签 来 代 蔡 。 当 然 ， 这 里 也 包含 
一 些 看 似 比较 实用 ， 实 际 在 项 目 中 并 不 会 经 常 使 用 的 语义 化 标签 ， 例 如 


<command>、<meter> 等 。 


HTML5 除 了 新 增 一 部 分 元 素 标 签 外 ， 还 在 一 部 分 原 有 标签 中 增加 
了 一 些 新 属性 。 例 如 <input> 这 个 元 素 标签 的 属性 值 变 化 就 比较 大 ， 
<input> 新 增 的 属性 有 autocomplete、placeholder、autofocus、required， 
另外 type 属 性 也 增加 了 email、url、number、range、color、search、date 
等 这 些 类 型 来 满足 更 多 的 应 用 场景 ， 下 面 的 代码 就 可 以 实现 原生 的 日 期 
时 间 选 择 。 





<input type="text" autocomplete="on" placeholder=" 请 输入 姓名 " autof 








<input type="color" /> 
<input type="date" /> 


<input type="time" /> 


用 较 新 的 浏览 器 解析 这 段 HIML， 可 以 看 到 这 两 个 标签 的 定义 会 出 
现 一 个 日 期 时 间 选 择 器 和 一 个 颜色 选择 器 ， 如 图 3-3 所 示 。 





年 /月 7 日 < 下 | |23: 一 | 


下 





2016 年 09 月 = 4 || 到 || ， 





有 周一 向 二 周 = 和 周 四 冉 五 咎 7 向 日 


1 2 3 
6 y 8 号 10 


13 14 15 16 17 
20 21 2 23 24 
27 28 29 30 








图 3-3 HIML5 日 期 时 间 与 颜色 选择 


不 知道 你 有 没有 想 过 ， 为 什么 <input> 这 么 简单 的 标签 定义 能 生成 这 
样 两 个 较 复 杂 的 选择 输入 界面 呢 ? 我 们 为 什么 还 要 第 第 找 第 三 方 日 期 时 
间 选 择 器 来 自己 实现 呢 ? 类 似 的 标签 还 有 很 多 ， 例 如 <video>、<audio> 
和 等。 既然 是 HTML5 自 带 的 ， 浏 览 器 原生 就 应 该 文 持 ， 但 浏 oad 
就 可 以 这 样 做 昵 ?接着 来 了 解 下 一 节 的 内 容 ， 找 到 这 些 问 题 的 答 





3.2.3 HIML Web Component 


要 解决 上 一 节 中 的 问题 ， 必 须 提 到 Shadow DOM。 先 不 急于 解释 
Shadow DOM 是 什么 ， 我 们 来 看 一 个 例子 。 


<video src="./assets/media.mp4" controls autoplay name="media"></ 


如 图 3-4 所 示 ，<video> 这 样 一 个 标签 可 以 在 浏览 器 产生 一 个 界面 相 
对 复 架 且 市 有 播放 控制 的 播放 器 ， 这 是 如 何 做 到 的 呢 ?” 为 了 便于 理解 这 
个 问题 ， 我 们 以 Chrome 浏 览 器 为 例 ， 选择 浏览 器 调试 工具 设置 中 的 
show userAgent Shadow DOM， 束 可 以 看 到 Shadow DOM 里 的 内 容 。 





”13:39 12259 ”一 -一 一 中 一 全 一 i 


图 3-4 ”video 标 签 浏览 器 显示 效果 


<video src="./assets/midea.mp4" controls autoplay name="media"> 
#Shadow root 
<div pseudo="-webkit-media-controls"> 
<div pseudo="-webkit-media-controls-overlay-enclosure"> 
<input type="button" style="display: none;"> 
</div> 
<div pseudo="-webkit-media-controls-enclosure"> 
<div pseudo="-webkit-media-controls-panel" style="dis 
<input type="button" pseudo="-webkit-media-contro 
<input type="range" step="any" pseudo="-webkit 
max="0"> 
<div pseudo="-webkit-media-controls-current-time- 
none;">0:00</div> 
<div pseudo="-webkit-media-controls-time-remainin 


<input type="button" pseudo="-webkit-media-contro 


<input type="range" step="any" max="1" 
pseudo="-webkit-media-controls-volume-slider" style="display: non 
<input type="button" 
pseudo="-webkit-media-controls-toggle-closed-captions-button" sty 
<input type="button" style="display: none;"> 
<input type="button" pseudo="-webkit-media-cont 
style="display: none;"> 
</div> 
</div> 
</div> 


</video> 





很 明显 ， 这 里 的 <video> 标 签 中 其 实 有 很 多 的 内 容 ， 隐 藏 的 Shadow- 
root 里 面 的 内 容 束 是 以 上 视频 播放 器 控制 组 件 HTML 结 构 的 所 在 之 处 ， 
对 应 的 CSS 也 是 可 以 看 到 的 ， 可 见 标签 内 部 也 是 由 很 多 个 <div>、 
<input> 和 与 之 对 应 的 CSS 样 式 形成 的 。 男 外 ， 浏 览 器 之 所 以 将 其 置 灰 ， 
是 为 了 表明 这 部 分 是 Shadow DOM 里 面 的 内 容 ， 在 页 面 中 ， 其 他 部 分 是 
不 能 调用 这 里 面 的 隐藏 元 素 的 。 也 就 是 说 ， 你 自己 写 的 CSS 选 择 器 和 
JavaScript 代 码 都 不 会 影响 到 Shadow DOM 里 面 的 内 容 。 实 质 上 就 是 让 
<video> 标 签 里 的 逻辑 和 样式 都 被 浏览 器 单独 封装 并 与 外 界 元 素 独 立 ， 
而 <video> 标 签 内 容 在 浏览 器 上 的 泻 染 则 是 在 浏览 器 结构 UI 后 端 模块 中 
设置 的 。 








再 来 具体 看 下 什么 是 Shadow DOM，Shadow DOM 是 HTML 的 一 个 
规范 ， 它 允许 浏览 器 开发 者 封装 自己 的 HTML 标 签 、CSS 样 式 和 特定 的 
JavaScript 代 码 ， 同 时 也 可 以 让 开发 人 员 创 建 类 似 <video> 这 样 的 自 定义 
一 级 标签 ， 创 建 这 些 新 标签 内 容 和 相关 的 API 被 称 为 Web Component。 








这 里 提出 了 Shadow DOM 和 Web Component 两 个 概念 ， 大 家 要 和 弄 明 白 两 
者 之 间 的 区 别 和 关联 。 


Shadow root 是 Shadow DOM 的 根 节 点 ;Shadow tree 为 这 个 Shadow 
DOM 人 包含 的 节点 子 树 结 构 ， 例 如 <div> 和 <input> 等 ，Shadow host 则 称 为 
Shadow DOM 的 容器 元 素 ， 即 上 面 的 标签 <video>。 那 么 我 们 该 如 何 使 用 
Web Component 创 建 一 个 Shadow DOM 呢 ? 


新 版 本 的 浏览 器 提供 了 创建 shadow DOM 的 API， 指 定 一 个 元 素 ， 
然后 可 以 使 用 document.createShadowRoot() 方 法 创建 一 个 Shadow root， 
在 Shadow root 上 可 以 任意 通过 DOM 的 基本 操作 API 添 加 任意 的 Shadow 
tree， 同 时 指定 样式 和 处 理 的 逻辑 ， 并 将 自己 的 API 雄 露出 来 。 完 成 创建 
后 需要 通过 document.registerElement() 在 文档 中 注册 元 素 ， 这 样 Shadow 
DOM 的 创建 束 完 成 了 。 需 要 注意 的 是 ， 目 前 该 方法 仅 文 持 chrome 31 及 
Android 4.4 以 上 版 本 的 浏览 器 。 以 下 为 一 个 图 文 组 合 的 Shadow DOM 元 
素 功 能 实现 代码 。 








<1!1doctype html> 
<html> 
<head> 


<meta charset="UTF-8"/> 








<tit1le> 图 文 组 合 插件 </tit1e> 
<!-- import 引入 组 件 内 容 --> 


<link href="./image.html" rel="import" /> 





</head> 


<body> 





<1-- 这 里 注册 生成 了 一 个 shadow host 为 <x-ijmage> 的 DOM 元 素 --> 


<x-image src="./image.jpg" width="290" height="160" alt=" 带 文 < 


</body> 
</html> 


组 件 模板 的 代码 文件 如 下 。 


<!-- 定义 组 件 --> 
<template> 
<!-- 组 件 模板 --> 
<style> 





/* Shadow host 内 容 */ 

:host { 
display: block; 

} 

:host .x-image { 
position: relative; 
display: block; 
margin: 0; 
padding: 0; 
width: 100%; 

} 

:host .x-image .x-image-imaget{ 
margin: 0; 
padding: 0; 
width: 100%; 
height: 100%; 

} 


:host .x-image .x-image-textt{ 


position: absolute; 
display: block; 
bottom: 0; 
padding: 10px Spx; 
left: 0O; 
right: 0; 
color: #fff; 
background: rgba(0,o0,0,0.5); 
} 
</style> 


<div class="x-image "> 
<Span class="x-image-image"> 
<img class='image' src="" alt="image" height="200"> 
</span> 
<span class="x-image-text">demo</span> 
</div> 
</template> 
<script> 
// 在 本 文件 被 导入 后 自动 执行 
(function(doc) { 
"use strict"; // 启用 严格 模式 
// 所 有 实例 元 素 对 象 的 公共 prototype 
let XImage = Object.create(HTMLElement.prototype, { 











height: { 
get: function() { return this._ height; }, 


set: function(height) { 


this._ height = height; 
this._innerBanner.style.height = height + "px 


this._innerBanner.querySelector('.image').sty 


} 
}, 
width: { 
get: function() { return this._width; }, 
set: function(width) { 
this. width = width,; 
this._innerBanner.style.width = width + 'px'; 
this._innerBanner.querySelector('.image').sty 
} 
}, 
alt: { 
get: function() { return this._width; }, 
set: function(alt) { 
this. alt = alt; 
this._innerBanner.querySelector('.banner-text 
this._innerBanner.querySelector('.image').set 
} 
}, 
src: { 


get: function() { return this._src; }, 
set: function(src) { 


this._src = src; 


this._innerBanner.querySelector('.image').set 


}); 
// 组 件 被 创建 时 执行 ， 相 当 于 构造 函数 
XImage.createdCallback = function() { 

// 创建 Shadow root， 将 自 定义 模板 放 入 其 中 


let ShadowRoot = this.createShadowRoot(); 











let template = doc.querySelector("template"); 


let node = document.importNode(template.content, true 


this._innerBanner = node.querySelector(".banner-secti 
// 设置 传 入 属性 ， 并 应 用 到 Shadow DOM 内 容 中 
let height = this. height || Number(this.getAttribute 





width = this. width || Number(this.getAttribute("widt 
alt = this. alt || String(this.getAttribute('alt' 


src = this._src || String(this ,getAttribute( Src， 


if (!isNaN(height) || !isNaN(width)) { 
this.height = height; 


this.width = Width; 


} 
if(alt)t{ 

this.alt = alt; 
} 


this.src = src; 


shadowRoot .appendchild(node); 


}; 
// 注册 组 件 


document .registerElement("x-image", { prototype: XImage } 


})(document ,currentScript.ownerDocument ) ， 


</script> 


这 里 在 HTML 中 使 用 HTMIL import 方 式 引 入 外 部 的 Shadow DOM 内 
容 ，Shadow host 为 <x-image>， 在 支持 Shadow DOM 的 浏览 器 上 会 显示 
如 图 3-5 所 示 的 效果 ， 即 描述 文字 在 图 片 底部 区 域 的 一 个 悬浮 效果 ， 同 
时 在 自 定 义 的 组 件 里 我 们 也 可 以 按照 自己 的 需要 向 外 暴露 可 配置 的 属性 
和 Web API 接 口 。 











290x160 


带 文 字 措 述 的 图 片 








图 3-5” 带 巧 浮 文字 的 图 片 标签 显示 效果 








根据 该 原理 实现 Shadow DOM 的 流程 束 是 Web Component 技 术 。 我 
们 已 经 知道 了 应 该 怎么 做 ， 那 么 再 来 看 一 下 利用 Web Component API 创 
建 实 现 一 个 Shadow DOM 时 需要 注意 哪些 方面 。 





o 注册 的 Shadow host 名 称 不 能 与 浏览 器 自 带 的 原生 Shadow host 名 
称 相 同 ， 这 个 应 该 很 容易 理解 ， 就 是 不 允许 出 现 两 个 名 称 相同 
但 是 功能 不 同 的 元 素 标签 ， 例 如 HTML5 规 范 中 含有 <header> 元 
素 ， 就 不 能 再 创建 Shadow host 为 <header> 的 Shadow DOM。 





<!-- 不 推荐 --> 
<audio>...</audio> 


<video>...</video> 





<!-- 回 过 头 看 下 AMP HTML Component， 其 创建 方式 也 是 Web Compont 
<amp-audio>...</amp-audio> 


<amp-video>...</amp-video> 


o 注意 样式 模块 的 隅 离 ， 一 定 要 保证 当前 的 Shadow DOM 样 式 只 
在 当前 Shadow DOM 内 生效 。 由 于 我 们 目 己 也 可 以 创建 Shadow 
DOM 的 样式 ， 所 以 开发 的 时 候 就 要 注意 规范 ， 人 否则 会 造成 
Shadow “DOM 之 间 样 式 耦 合 、 相 互 影响 的 问题 。 一 般 我 们 将 
Shadow “DOM 唯 一 的 Shadow host 作 为 类 名 来 定义 ， 例 如 <x- 
image> 的 样式 定义 可 以 编写 如 下 。 


<style> 

/* Shadow host 内 容 */ 

:host { 
display: block; 

} 

:host .x-image { 
position: relative,; 
display: block; 
margin: 0; 
padding: 0; 
width: 100%; 

} 

</style> 


o 暴露 合理 的 有 效 属性 配置 和 DOM API 接口 。 例 如 上 面 实例 中 内 
容 的 src、width、height 属 性 配置 对 于 元 素 的 最 终 表 现 是 有 影响 
的 ， 我 们 在 创建 Shadow DOM 的 同时 也 要 考虑 到 Shadow DOM 
的 可 定制 和 扩展 性 。 














o 在 目前 浏览 器 不 完全 支持 Web Component 的 情况 下 ， 如 果 需 要 
在 实际 项 目 中 使 用 ， 我 们 还 需要 解决 好 如 何 构建 打包 的 问题 。 
通过 构建 来 分 别 打 包 Component 的 HIML、JavaScript、CSS 可 
以 实现 当前 主流 浏览 器 的 兼容 ， 这 种 思路 实质 上 就 是 通过 构建 
解析 和 创建 Shadow DOM 内 容 来 解析 Shadow DOM 结 构 ， 而 不 
是 让 浏览 器 直接 解析 Shadow DOM 结 构 。 





3.3 浏览 器 脚本 演进 历史 


我 们 知道 ， 目 前 前 并 浏览 器 上 的 执行 脚本 以 JavaScript 为 主 。 但 是 这 
并 不 意味 着 我 们 在 任何 情况 下 都 可 以 直接 使 用 JavaScript 进 行 安 全 开发 ， 
之 前 有 人 提出 JavaScript 设 计 中 糟糕 的 部 分 ， 还 有 人 读 过 《JavaScript 语 
言 精髓 》。 作 为 一 种 标准 化 的 语言 ， 竞 然 有 很 多 特性 被 人 公然 地 气 弃 ， 
十 分 不 可 思议 。 例 如 对 于 ECMAScript 5 及 以 前 的 JavaScript 版 本 ， 虽 然 已 
经 可 以 定义 使 用 严格 模式 了 ， 但 我 们 仍 会 听 到 一 些 不 好 的 评价 ， 例 如 全 
局 作用 域 、eval、with、 类 声明 缺失 等 不 合理 的 特性 设计 ， 后 面 我 们 也 


会 具体 讨论 这 些 问 题 。 











name = 'ouven'; 
person = { 
name: name, 
address: 'China', 
job: "engineer '， 
city: 'Shenzhen', 
website: 'http://www.]Jjixianqianduan.com' 


}; 


with(person)t{ 
console.1log(name, address, job, city, website); 


eval('alert(name)'); 


上 面 的 代码 在 非 严格 模式 的 下 是 可 以 完美 运行 的 ， 但 是 并 不 合理 ， 
全 局 变量 会 让 window 很 难 管理 ，with 会 降低 代码 执行 速度 、eval 的 使 用 
也 有 性 能 缺陷 。 尽 管 如 此 ， 在 不 同 的 时 代 背 景 下 我 们 仍 需 要 合理 的 解决 
方案 来 处 理 和 避免 这 些 问题 以 保证 开发 的 安全 性 。 笠 运 的 是 ， 我 们 总 能 
找到 一 些 解决 方案 来 应 对 当前 的 这 些 问 题 ， 先 来 看 看 曾经 盛 极 一 时 的 
CoffeeScript。 








3.3.1 ”CoffeeScript 时 代 


如 今 已 经 很 少 有 人 再 提起 CoffeeScript， 但 CoffeeScript 代 表 着 前 端 
脚本 语言 历史 上 的 一 段 辉 烛 时 期 。CoffeeScript 是 一 套 可 转译 为 
JavaScript 语 法 的 语言 。 那 么 ， 既 然 已 经 有 了 JavaScript， 为 什么 还 会 有 
CoffeeScript 的 出 现 ? 早 在 JavaScript 规 范 混乱 的 时 代 ， 一 些 糟 糕 的 设计 
不 仅 让 开发 的 代码 运行 不 稳定 ， 而 且 还 会 增加 大 型 项 目的 维护 难度 。 像 
前 面 提 到 的 全 局 变量 、 作 用 域 this、 函 数 参 数 为 数组 对 象 、 类 声明 缺 
失 、 默 认 模 式 下 无 规范 限制 、 语 法 声明 元 党 等 特性 在 开发 过 程 中 尤其 需 
要 注意 ， 一 旦 处 理 不 完善 ， 束 可 能 导致 出 错 并 花费 大 量 的 时 间 去 排查 。 








因此 CoffeeScript 的 创建 者 Jeremy ”Ashkenas 借 鉴 了 部 分 其 他 语言 简 
洁 、 开 发 高 效 的 特性 ， 重 新 定义 了 一 套 语法 规则 ， 然 后 按照 统一 的 规则 
转译 成 规范 、 可 读 、 默 认 在 严格 模式 下 运行 的 JavaScript 人 代码， 这 样 就 有 
效 地 保证 了 最 后 运行 的 JavaScript 代 码 是 具有 一 定 规范 且 风 格 统一 的 ， 而 
CoffeeScript 本 身 定 义 的 语法 规则 也 是 十 分 高 效 且 带 有 较 好 设计 规范 的 。 
尽管 这 样 运行 时 需要 增加 转译 的 工作 ， 但 是 能 帮助 我 们 规避 上 面 这 些 不 
安全 的 问题 ， 是 很 有 价值 的 。 








下 面 来 看 一 些 CoffeeScript 特 性 ， 有 具体 如 下 。 


# 赋 值 : 
number=1 
opposite=true 
# 条 件 : 


number=-1 if opposite 


# 消 数 : 


square=(Xx)->x*x 


# 数 组 : 
list=[1, 2, 3] 


# 存 在 性 : 


alert"I knew it!" if isKnown? 


现在 CoffeeScript 也 可 以 直接 转译 为 ECMAScript 6 (后 面 将 会 具体 


绍 ECMAScript 6 的 特性 ) 代码 ， 转 译 后 代码 如 下 。 


"USe Strict ' ， 


let number = 1; 


let oppsite = true; 


if(opposite)t 


number = -1; 


从 


function Square (x)t 


return x*x; 


let list = [1,2,3]; 


if(isKnown)t{ 


alert("I knew it!"); 


相 比 之 下 ，CoffeeScript 语 法 更 加 简洁 易 用 ， 限 制 避 免 了 eval、with 
这 类 不 安全 语法 的 使 用 。CoffeeScript 定 义 的 这 套 语法 转译 规则 使 用 了 更 
加 简洁 高 效 的 编码 语法 来 转译 生成 严谨 安全 的 JavaScript， 因 此 也 受到 很 
多 JavaScript 开 发 者 的 青睐 。 甚 至 有 人 曾 提 出 要 做 另 一 个 
JVM (JavaScript Virtual Machine，JavaScript 虚 拟 机 ) ， 和 希望 用 它 在 浏览 
器 上 直接 运行 CoffeeScript， 可 见 CoffeeScript 曾 经 是 多 么 的 盛 极 一 时 。 
笔者 也 曾 维护 过 一 个 基于 CoffeeScript 的 项 目 ， 整 个 项 目 完全 使 用 
CoffeeScript 实 现 ， 路 由 地 址 配置 代码 就 多 达 7000 多 行 ， 所 以 
CoffeeScript 在 只 有 ECMAScript 5 的 时 代 是 极 具 代表 性 的 。 





了 解 ECMAScript 6 标准 的 人 肯定 知道 上 面 例子 中 的 箭头 函数 。 随 着 
ECMAScript 6 标准 的 发 布 ， 更 加 标准 的 规范 和 同样 类 似 的 高 效 特性 出 现 
了 ， 此 外 ，ECMAScript 6 标准 还 补充 完善 并 增强 了 JavaScript 本 身 的 运行 
特性 。CoffeeScript 因 此 开始 走 同 没落 。 


3.3.2 ECMAScript 标准 概述 


首先 我 们 来 了 解 一 下 ECMAScript，ECMAScript 是 TC39 (Technical 
Committee 39， 技 术 专 家 委员 会 39) 负责 制定 的 JavaScript 标 准 ， 其 发 展 
历史 如 下 。 


o 1999 年 12 月 ，ECMAScript 3 发 布 。 其 中 主要 定义 了 ECMAScript 
的 一 些 常用 对 象 和 条 件 控制 语法 ， 例 如 内 置 对 象 、 正 则 表达 
式 、 条 件 控制 语法 、 异 常 处 理 、 错 误 定义 等 。 


o 2009 年 12 月 ，ECMAScript 5 标准 发 布 。 其 中 主要 新 增 了 严格 模 
式 、JSON 对 象 、 新 增 Object 接 口 、 新 增 Array 接 口 、 
Function.prototype.bind 等 特性 。 


o 2015 年 6 月 17 日 ，ECMAScript 6 正式 发 布 。 其 中 增加 了 块 级 作用 
域 变量 声明 规范 、String 模 板 、 解 构 、arrow 函 数 、Symbol 类 
型 、 类 、 迭 代 器 、 生 成 器 、 集 合 、Promise、Proxy 等 特性 。 这 
也 是 CoffeeScript 开 始 走 同 没落 的 一 个 转折 点 。 


o 2016 年 ，ECMAScript 7 发 布 ， 主 要 增加 了 需 函 数 和 
Array.prototype.includes 特 性 。 


就 兼容 性 方面 而 言 ，Node 6.0 版 本 已 基本 文 持 到 ECMAScript 
6 〈939% 特 性 支持 ) ， 新 版 本 的 Node 也 支持 更 多 ECMAScript 6 以 上 的 新 
特性 。 浏 览 句 端 Chrome 52 已 完全 文 持 ECMAScript 6， 并 逐渐 添加 了 对 
ECMAScript 7 特性 的 文 持 ， 其 他 浏览 器 或 平台 也 在 陆续 添加 对 
ECMAScript 6 标准 的 支持 。 


在 工程 开发 实践 中 ，ECMAScript 6 的 应 用 也 很 快 被 推广 并 分 为 两 个 
方向 : 一 是 用 于 浏览 器 端 应 用 开发 ， 由 于 浏览 器 版 本 较 多 ， 需 要 将 
ECMAScript 6 转译 为 ECMAScript 5 的 语法 运行 ， 其 实 这 跟 CoffeeScript 的 





使 用 方式 是 一 样 的 ， 因 此 这 种 情况 下 ECMAScript ”6 只 能 作为 语法 糖 使 
用 ， 实 际 运行 时 不 能 真正 使 用 到 新 版 本 标准 的 特性 ;二 是 Node 端 的 应 用 
开发 ， 由 于 Node 环 境 对 新 版 本 特性 支持 较为 完善 ， 因 此 可 以 使 用 
ECMAScript 6 的 新 特性 ， 尤 其 是 对 于 完善 或 增强 类 特性 的 支持 ， 能 够 大 
大 提升 开发 效率 ， 完 善 功 能 实现 效果 。 在 这 种 情况 下 ， 开 发 者 对 
CoffeeScript 的 使 用 慢 慢 减少 ， 渐 渐 转 问 遵 循 规 范 的 ECMAScript 6+ ( 泛 
指 ECMAScript 6 以 上 版 本 ) 标准 。 











3.3.3 ”TypeScript 概 况 


我 们 可 以 认为 ，JavaScript 除 了 主要 遵循 ECMAScript 6 十 标准 外 ， 还 
遵循 另 一 种 语法 规范 ， 即 TypeScript。TypeScript 是 微软 在 2012 年 推出 的 
一 种 自由 开源 编程 语言 ， 是 JavaScript 的 一 个 超 集 。 尽 管 ECMAScript 新 
标准 和 草案 不 断 推 出 ， 但 TypeScript 依 然 存 在 ， 同 时 也 获得 了 不 少 追 捧 
者 。TypeScript 除 了 部 分 独 有 的 新 特点 外 ， 依 然 主要 遵循 ECMAScript 
6+ 标 准 的 规范 。 


TypeScript 相 对 于 ECMAScript 6 十 标准 的 差异 性 很 小 ， 大 部 分 与 
ECMAScript 6 十 保持 一 致 。 为 此 一 部 分 开发 者 在 接受 TypeScript 概 念 的 
欣喜 之 余 也 开始 反省 ，TypeScript 提 出 的 差异 性 特性 优势 并 不 明显 ， 在 
实现 ECMAScript 6 十 特性 支持 的 基础 上 增加 了 少数 特殊 应 用 场景 下 优势 
的 内 容 。 当 然 ， 笔 者 个 人 觉得 TypeScript 今 后 的 发 展 仍 有 待 观察 。 


3.3.4 ” JavaScript 衍生 脚本 


什么 是 JavaScript 的 衍生 脚本 ? 目前 可 以 理解 为 基于 现 有 JavaScript 


的 实现 扩展 自己 特有 语法 规则 来 适应 特殊 应 用 场景 的 一 类 脚本 规范 。 也 
可 以 理解 为 JavaScript 的 超 集 ， 并 且 通 党 需要 额外 文 持 自身 特性 的 解析 器 
来 转译 成 JavaScript 解 析 执 行 ， 例 如 JSX 或 HyperScript。CoffeeScript 和 
TypeScript 在 某 种 意义 上 也 是 一 种 JavaScript 衍 生 脚 本 ， 但 这 是 之 前 的 版 
本 了 ， 以 后 可 能 还 会 出 现 其 他 新 的 衍生 脚本 来 适应 相对 应 的 场景 。 





例如 JSX 语 法 的 官方 声明 ， 使 用 它 的 原因 是 其 定义 了 更 简洁 且 文 持 
对 应 DOM 属 性 的 树 状 结构 描述 语法 。 它 的 标记 规则 类 似 于 HIML， 但 解 
析 不 完全 一 样 。HyperScript 则 是 另 一 种 可 以 方便 创建 Virtual 
DOM (Virtual DOM， 也 叫 虚 拟 DOM， 虚 拟 DOM 是 用 来 描述 HTML 
DOM 节 点 之 间 属 性 和 对 应 关系 的 一 类 JavaScript 对 象 ， 通 各 在 内 存 里 是 
一 个 简单 对 象 ， 通 过 特定 的 规则 解析 可 以 与 原 有 HIML DOM 进 行 对 应 
的 转换 ， 在 后 面 的 章节 中 会 展开 介绍 〉 的 描述 性 脚本 语言 ， 也 是 
JavaScript 的 一 种 超 集 。 

















但 是 不 管 怎么 样 ， 不 同 的 JavaScript 衍 生 脚 本 均 具 有 一 些 共性 。 
o 基于 JavaScript， 是 JavaScript 的 超 集 


o 适用 于 特定 的 场景 





o 具有 自己 的 规范 





o 可 以 按 一 定 的 规则 解释 运行 或 转译 成 JavaScript 运 行 


或 者 可 以 认为 ， 任 何 一 种 语言 的 新 版 本 都 是 前 一 个 版 本 的 衍生 脚 
本 。 是 否 遵循 语言 的 长 期 发 展 规范 也 诀 定 痢 这 个 衍生 脚本 规范 能 否 继续 
下 去 。 例 如 CoffeeScript 的 出 现 衍 生 了 ECMAScript 5 的 标准 语法 ， 
ECMAScript 6 规范 却 又 借鉴 了 CoffeeScript 的 部 分 特性 和 一 些 其 他 的 语言 


优势 然后 将 CoffeeScript 淘 汰 。 这 也 说 明了 开发 过 程 中 遵循 语言 标准 的 重 
要 性 ， 或 许 某 一 天 新 的 ECMAScript 标 准将 直接 支持 现在 衍生 脚本 创建 
Virtual DOM 功 能 的 语法 。 





前 问 脚 本 语言 的 泗 进 过 程 主要 包括 以 下 几 个 阶段 ECMAScript 5、 
CoffeeScript、ECMAScript 6+、TypeScript 和 衍生 脚本 。 本 节 中 我 们 大 致 
了 解 了 它们 的 特点 和 应 用 场景 ， 那 么 在 下 一 节 中 ， 我 们 将 重点 来 介绍 
JavaScript 标 准 在 实际 应 用 开发 中 的 特性 应 用 和 表现 。 


3.4 JavaScript 标准 实践 


JavaScript 标 准 自 确定 后 就 和 ECMAScript 有 着 密切 的 联系 ， 目 前 几 
乎 所 有 的 JavaScript 代 码 都 遵循 ECMAScript 规 范 。 可 以 简单 理解 为 


JavaScript 是 语言 ，ECMAScript 则 是 语言 习惯 。 


如 果 将 JavaScript 比 作 英 语 ， 那 么 ECMAScript 标 准 可 以 理解 为 美 
式 瑞 语 ，TypeScript 则 可 以 理解 为 瑞 式 英语 。 它 们 大 部 分 的 语法 都 是 
相同 的 ， 但 仍 有 少 部 分 的 差异 ， 都 是 英语 的 使 用 标准 。 


这 一 节 中 ， 我 们 将 从 ECMAScript 5 开始 讲 起 ， 重 点 了 解 一 下 
ECMAScript 标 准 是 如 何 一 步 步 改 进 完善 的 。2009 年 12 月 ，ECMAScript 
5.0 版 正式 发 布 。Harmony 项 目 〈Harmony 项 目 其 实 可 以 认为 是 未 被 发 布 
的 ECMAScript 4.0 版 本 ， 由 于 草案 发 生 分 上 收 ， 最 后 被 命名 Harmony) 一 
分 为 二 : 一 些 较 为 可 行 的 语言 特性 被 命名 为 JavaScript.next 继 续 开 发 ， 并 
演变 成 后 来 的 ECMAScript 6; 男 一 些 不 是 很 成 熟 的 语言 特性 ， 则 被 视 为 
JavaScript.next.next 版 本 ， 在 更 远 的 将 来 再 考虑 推出 。2015 年 6 月 17 日 ， 
ECMAScript ”6 正式 发 布 ， 因 此 ECMAScript ”6 也 被 称 为 ECMAScript 
2015， 此 版 本 标准 在 原 有 的 ECMAScript 特 性 上 进行 了 较 大 的 修改 和 完 
善 ， 现 已 成 为 较为 通用 的 JavaScript 开 发 标准 。2016 年 ，ECMAScript 7 发 
布 。 下 面 逐 个 来 了 解 这 些 与 JavaScript 标 准 相关 的 内 容 。 


3.4.1 ECMAScript5 


ECMAScript 5 于 2009 年 12 月 发 布 ， 内 容 主 要 包括 严格 模式 、JSON 
对 象 、 新 增 Object 接 口 、 新 增 Array 接 口 和 Function.prototype.bind。 可 以 
认为 ECMAScript 5 规范 的 推出 在 原来 没有 规范 的 JavaScript 语 法 上 添加 了 
有 限 的 限制 标准 。 其 中 最 重要 的 一 条 可 能 区 是 严格 模式 的 提出 。 


严格 模式 


ECMAScript 5 严格 模式 的 提出 为 开发 者 提供 了 更 加 安全 规范 的 编程 
范围 ， 限 制 了 原 有 一 些 不 规范 的 写法 ， 让 一 些 不 合理 的 语法 直接 报错 ， 
从 而 提高 了 代码 的 安全 性 和 规范 性 。 例 如 ， 在 严格 模式 下 ， 未 声明 的 全 
局 变量 赋值 会 抛 出 ReferenceError， 而 不 是 默认 去 创建 一 个 全 局 变量 ; 默 
认 文 持 的 糟糕 特性 都 会 被 禁用 ， 使 用 with、eval 等 语句 执行 会 抛 出 
SyntaxError; 限制 了 函数 中 的 arguments 使 用 ， 严 格 模式 下 函数 内 部 的 
arguments.callee() 和 arguments.caller() 调 用 会 提示 Uncaught 
ReferenceError; 删除 系统 内 置 对 象 属性 、 对 象 已 冻结 (isFrozen) 的 属 
性 、 对 象 已 密封 (isSealed) 的 属性 、 全 局 变量 或 var 定 义 的 变量 等 都 是 
不 允许 的 ， 否 则 会 报 Uncaught SyntaxError 错 误 ; 对 禁止 扩展 的 对 象 添加 
新 属性 或 对 对 象 只 读 属性 赋值 会 报 Uncaught TypeError; 函数 参数 不 能 
有 重 名 的 情况 ， 和 否则 会 报 Uncaught SyntaxError; 函数 arguments 严 格 定义 
为 参数 ， 不 再 与 形 参 绑 定 ， 尽 管 如 此 ， 我 们 依然 不 建议 使 用 arguments 变 
量 ;，callyapply 的 第 一 个 参数 将 直接 传 入 不 自动 封装 为 对 象 ， 对象 属性 不 
建议 有 重 名 的 情况 发 生 ， 人 否则 一 部 分 浏览 器 会 报 Uncaught SyntaxError， 
所 以 也 不 建议 出 现 。 具 体 来 看 下 面 的 这 些 例子 。 














"USe Strict ' ， 
myName = 'ouven'; // Uncaught ReferenceError: myName is not defin 
person = { // Uncaught ReferenceError: person is not defin 
name: myName, 
address: 'China', 
job: 'engineer', 
job: 'writer'，// 部 分 浏览 器 报错 : Uncaught SyntaxError 
city: 'Shenzhen', 
website: 'http://www.]Jjixianqianduan.com' 


}; 


with(person){ // Uncaught SyntaxError: Strict mode code may not 
console.log(name, address, job, city, website); 


eval('alert(name) '); 


}; 

delete myName; // Uncaught SyntaxError: Delete of an unqualifi 
mode. 

function sayHi(arguments)t{ // Uncaught SyntaxError: Unexpected 


strict mode 


console.1log( HI ${arguments} ); 


需要 注意 的 是 ， 严 格 模式 下 错误 的 提示 类 型 和 摘 述 在 不 同 浏览 器 
可 能 不 相同 ， 具 体 与 浏览 器 的 实现 有 关 。 





总 体 来 说 ， 严 格 模式 的 添加 消除 了 Javascript 语 法 的 一 些 不 合理 、 不 
严谨 之 处 ， 减 少 了 一 些 怪异 行为 ， 可 以 在 一 定 程 度 上 提高 编译 器 效率 ， 
加 快运 行 速度 ， 为 未 来 新 版 本 的 Javascript 标 准 化 做 了 铺垫 ， 这 是 非常 有 
意义 的 。 


JSON 


一 般 情况 下 ， 我 们 使 用 JavaScript 语 言 解 析 字 符 串 为 JSON 对 象 或 解 
析 JSON 对 象 为 字符 串 时 可 以 使 用 JSON.parse0 和 JSON.stringify0， 这 些 
用 法 相信 大 家 也 都 了 解 。 问 题 是 ， 我 们 要 知道 JSON 对 象 解析 不 是 伴随 
着 JavaScript 的 出 现 而 产生 的 。 例 由 比 IE8 更 低 版 本 的 浏览 器 中 不 能 直 
接 使 用 JSON 的 解析 方法 。 不 过 现在 我 们 通常 可 以 在 浏览 器 中 添加 es5- 
shim 来 增加 浏览 器 对 ECMAScript 5 功能 的 支持 ， 让 浏览 器 支持 JSON 对 
象 的 解析 ， 这 样 我 们 就 可 以 在 后 面 的 代码 中 放心 使 用 JSON.parse0 和 
JSON.stringifyO 了 。 


<script src="//www.domain.com/es5-shim.]js"></script> 


JSON 对 象 中 有 几 个 容易 混淆 的 方法 : JSON .stringify()、 
JSON.toString ()、JSON.valueOf()、JSON.toLocaleString()。 
JSON.stringify0) 适 用 于 将 JSON 内 容 转 为 字符 串 ; JSON.valueOfO 用 于 获 
取 某 个 对 象 中 的 值 ，JSON.toString ”0 被 调用 时 会 调用 Object 原 型 上 的 
toString 方 法 ， 会 取得 JSON 对 象 的 值 并 转 为 字符 串 ， 如 果 没 有 基体 的 
值 ， 则 返回 原型 数组 ，JSON.toLocaleString () 也 是 Object 原 型 上 的 方法 ， 
经 常会 返回 与 toString 0 相同 内 容 ， 但 对 于 Date 对 象 ，toLocaleString() 会 


返回 格式 化 后 的 时 间 字 符 串 。 


JSON.stringify({name: 'ouven'}); // 输出 : "{"name":"ouven"}" 
JSON.toString({name: 'ouven'}); // 输出 : "[object Object]" 
JSON.valueof({name: 'ouven'}); // 输出 : JSON {Symbol(Symbol.toSt 


JSON.toLocaleString({fna006De: 'ouven'});  // 输出 : "[object objec 


let colors = ['red', 'blue', 'green']; 
console.1log(colors.toString()); // red, blue, green 
console.1log(colors.valueof( )); // ["red", "blue", "green 


console.1log(colors.toLocaleString()); // red, blue, green 


let date = new Date(); 

console.1log(date.toString()); // Thu Sep 08 2016 10:07:50 
console.1log(date.valueof()); // 1473300470759 
console.1log(date.toLocaleString()); // 2016/9/8 上 午 10:07:50 


新 增 Object 方 法 属性 


根据 ECMAScript 5 规范 文档 ，ECMAScript 5 标准 添加 了 较 多 Object 
原型 对 象 上 的 方法 。 


ECMAScript 5 标准 中 新 增 的 Object 方法 和 属性 如 下 ， 见 表 3-2。 尽 管 
这 些 新 增 的 Object 属 性 或 方法 在 我 们 实际 的 业务 开发 中 并 不 一 定常 用 ， 
但 如 果 要 自己 抽象 一 个 工具 类 或 者 实现 JavScript 库 ， 就 可 能 会 用 到 它 
们 ， 这 里 读者 们 可 以 灵活 选择 。 


























表 3-2 ECMAScript 5 Object 新 增 方法 


| 描述 
getPrototypeOf 返回 一 个 对 象 的 原型 
getOwnPropertyDescriptor| 返 回 某 个 对 象 自 有 属性 的 属性 描述 符 

汉 回 二 不 数组 ， > 


me 创建 一 个 拥有 指定 原型 和 知 干 指定 属性 的 对 
象 
为 对 象 定义 一 个 新 属性 ， 或 者 修改 已 有 的 属 

defineProperty 性 ， 并 对 属性 重新 设置 getter 和 setter， 这 里 可 
以 被 用 作 数据 绑 定 的 对 象 劫持 用 途 

在 一 个 对 象 上 添加 或 修改 一 个 或 者 多 个 自 有 

defineProperties 属性 ， 与 defineProperty 类 似 

sea 锁定 对 象 。 阻 止 修 改 现 有 属性 的 特性 ， 并 阻 
止 添加 新 属性 ， 但 是 可 以 修改 已 有 属性 的 值 

和 阻止 对 对 象 的 一 切 操作 和 更 改 ， 冻 结对 象 将 
变 为 只 读 

Dev er ts J 2 的 不 可 扩展 ， 也 束 是 不 能 再 添 


isSealed 判断 对 象 是 否 被 锁定 
isFrozen 判断 对 象 是 否 被 冻结 
isExtensible 判断 对 象 是 否 可 以 被 扩展 


ee 返回 一 个 由 给 定 对 象 的 所 有 可 枚 举 自身 属性 
的 属性 名 组 成 的 数组 


let colors = ['red', 'blue', 'green']; 






































console.1log(Object.getPrototypeOof(colors)); // [Symbol(Symbol.uns 
console.1log(0Object.getOwnPropertyDescriptor(colors)); // undefine 


console.1log(Object.getOwnPropertyNames(colors)); // ["0", "1", "2 


0bject.seal(colors); // 锁定 对 象 








0bject .freeze(colors); // 冻结 对 象 
0bject.preventExtensions(colors); // 阻止 扩展 


console.1log(Object.isSealed(colors)); // true 
console.1log(Object.isFrozen(colors)); // true 
console.1log(Object.isExtensible(colors)); // true 


console.1log(Object.keys(colors)); // ["0", "1", "2"] 


colors[2] = 'gray'; // Uncaught TypeError: Cannot assign to read 
'[object Arrayl]' 
colors[4] = 'gray'; // Uncaught TypeError: Can't add property 4, 


delete colors[2]; // Uncaught TypeError: Cannot delete property 


新 增 Array 方 法 属性 





ECMAScript 5 标准 对 内 置 数 组 对 象 的 原型 方法 也 做 了 扩展 完善 ， 主 
要 添加 了 下 列 常 用 的 方法 ， 如 表 3-3 所 示 。 








表 3-3 ” ECMAScript 5 Array 新 增 方法 


| 如 果 不 存在 则 返 
回 -1 





上 和 和 如 果 不 存 在 则 
返回 -1 











eVery 测试 数组 的 所 有 元 系 是 否 痢 通过 了 指定 函数 的 测试 








some 测试 数组 中 的 某 些 元 素 是 否 通 过 了 指定 函数 的 测试 

forEach 令 数 组 的 每 一 项 都 执行 指定 的 函数 

i 返回 一 个 由 原 数 组 中 每 个 元 素 调 用 茶 个 指定 方法 得 到 的 返 
回 值 所 组 成 的 新 数组 ， 返 回 每 一 个 处 理 结果 

Re i 函数 处 理 的 元 素 创 建 一 个 新 的 数组 并 返 


ee 接收 一 个 函数 作为 系 加 器 ， 数 组 中 的 每 个 值 〈 从 左 到 厂 ) 
开始 缩减 ， 最 终 缩减 为 一 个 值 

















一 | 接受 一 个 函数 作为 累加 器 ， 数 组 中 的 每 不 值 《从 石 到 起 ) 
reduceRight 开始 缩减 ， 最 终 缩减 为 一 个 值 





相 比 Object 新 增 的 内 容 ， 内 置 对 象 Array 新 增 的 这 些 方 法 都 是 很 方便 
很 常用 的 ， 为 对 数组 进行 操作 提供 了 便捷 ， 方 便 对 业务 数据 进行 处 理 。 


let colors = ['red', 'blue', 'green', 'green']; 


console.1log(colors.indexOof('green')); // 2 


console.1log(colors.1lastIindexOof('green')); // 3 


console.log(colors.every(function(color)t{ 
return color.length >= 3; 


})); // true， 判 断 是 否 所 有 的 元 素 长 度 均 大 于 等 于 3 








console.log(colors.some(function(color)t{ 
return color.length > 4; 


})); // true， 判 断 是 否 有 至 少 一 个 元 素 长 度 大 于 4 











colors.forEach(function(color)t{ 


if(color === 'green'){ 


console.1log(color); 


} 


}); // green green 


console.log(colors.map(function(color)t{ 
if(color === 'green')t{ 
return color; 


} 
})); // 输出 数组 : [undefined, undefined, "green", "green"] 


console.1log(colors.filter(function(color)t{ 
if(color === 'green')t 
return color; 


} 
})); // 输出 数组 : ["green"，"green"] 


console.1log(colors.reduce(function(color, nextColor)t{ 
return color + ',' + NextColor; 


}));” // 输出 字符 串 : red,blue,green,green 





console.1log(colors.reduceRight(function(color, nextColor){ 
return color + ',' + NextColor; 


})); // 输 出 字符 串 : green, green,blue,red 





Function.protptype.bind 


ECMAScript 中 新 增 的 函数 的 bind 0 方法 比较 常用 ，bind (0) 方 法 会 创 
建 一 个 新 函数 ， 称 为 绑 定 函数 。 当 调用 这 个 绑 定 函数 时 ， 绑 定 函数 会 以 
创建 它 时 传 入 bind () 方 法 的 第 一 个 参数 作为 this， 以 传 入 bind () 方 法 的 第 
二 个 以 及 以 后 的 参数 和 绑 定 函数 运行 时 本 身 的 参数 按照 顺序 作为 原 函 数 
的 参数 来 调用 ， 有 具体 如 下 。 


fun.bind(thisArg[, argi[, arg2[,...]]|]); 





其 实 JavaScript 中 重新 绑 定 this 变 量 的 函数 方法 还 有 call()、apply0， 
不 过 bind0 显 然 与 它们 有 着 明显 的 不 同 ，bind0 会 返回 一 个 新 的 函数 ， 并 
将 传 入 的 参数 和 范 数 绑 定 起 来 ， 而 call 0 或 apply0 则 是 使 用 新 的 this 去 直 
接 调用 、 执 行 函数 。 





const fun = function(param) { 
console.log(this+ ':' +param) 
}; 
fun.call(this, 'ouven'); // " [object Window]:ouven" 


fun.apply(this, ['ouven']); // " [object Window]:ouven" 


let funNew = fun.bind('ouven', ‘'zhang'); 


funNew(); // 'ouven:zhang' 


String.protptype.trim、 Date.now()、Date().toJSON 


console.1log(' ouven zhang '.trim()); // "ouven zhang" 
console.1log(Date.now( )); // 返回 当前 时 间 惟 ， 如 1473 


console.log((new Date()).toJSON()); // "2016-11-21T02:59:28.5 


总 体 来 说 ，ECMAScript 5 增加 的 特性 相对 不 多 ， 主 要 是 对 之 前 语法 
的 完善 ， 但 大 多 新 增 内 特性 都 是 很 实用 的 ， 相 信 大 部 分 大 家 都 已 经 熟悉 
了 。 接 下 来 我 们 重点 看 一 下 ECMAScript 6 标准 的 新 特性 和 一 些 需 要 注意 


的 问题 。 


3.4.2 ECMAScript 6 


ECMAScrtipt 6 于 2015 年 6 月 17 日 正式 发 布 ， 也 被 命名 为 ECMAScript 
2015。 早 在 草案 制定 阶段 ，ECMAScript 6 特性 就 被 部 分 开发 者 应 用 在 实 
际 项 目 中 。ECMAScript 6 借鉴 了 ECMAScript 5 和 其 他 语言 的 特性 ， 并 在 
此 基础 上 进行 了 补充 和 增强 ， 最 终 形成 了 一 套 完整 的 特性 集合 ， 使 得 
JavaScript 语 言 规范 更 加 高 效 、 严 说 、 完 善 。 例 如 字符 串 模 板 、 集 合 、 箭 
头 函 数 、Promise、for...of 循 环 等 均 是 借鉴 其 他 语言 的 优秀 特性 而 增加 的 
功能 点 ，class 类 和 import/export 模 块 规范 则 可 以 认为 是 对 原 有 
ECMAScript 标 准 缺 失 特 性 的 补充 ， 迭 代 器 、 生 成 器 、 解 构 赋 值 、 函 数 
参数 等 可 认为 是 对 原 有 标准 特性 的 增强 。 这 里 我 们 将 用 简短 的 篇 幅 来 向 
大 家 介绍 ECMAScript 6 新 增 的 核心 特性 的 使 用 方法 和 实际 开发 中 需要 注 
意 的 地 方 。 


块 级 作用 域 变量 声明 关键 字 let、const 
let a = 1; 


const b = 'hello'; 


var A = 2; 


let c= 'c'， 


const dd; // Uncaught SyntaxError: Missing initializer in c 


console.log(c); // Uncaught ReferenceError: c is not defined 


b = 'world'; // Uncaught TypeError: Assignment to constant var 


console.log(window.a || global.a); // undefined 


console.log(window.A || global.A); // 2 





有 几 个 需要 注意 的 地 方 : 一 是 let 和 const 都 只 能 作为 块 级 作用 域 变 量 
的 声明 ， 且 只 能 在 块 作用 域内 生效 ， 块 内 声明 的 变量 无 法 在 块 级 外 层 引 
用 ; 二 是 使 用 const 声 明 的 变量 必须 进行 初始 化 赋值 ， 而 且 一 旦 赋值 束 不 
能 再 进行 二 次 修改 赋值 ， 三 是 使 用 let、const 在 全 局 作用 域 下 声明 的 变量 
不 会 作为 属性 添加 到 全 局 作用 域 对 象 里 面 ， 这 点 和 var 是 不 同 的 ， 四 是 
通过 测试 ， 使 用 let、const 赋 值 语 句 的 执行 速度 比 使 用 var 快 约 65% 左 
右 。 所 以 ， 我 们 除了 知道 使 用 let 和 const， 也 需要 了 解 lat 和 const 使 用 场 
景 的 区 别 : 模块 内 不 变 的 引用 和 常量 ， 一 般 使 用 const 定 义 ; 可 变 的 变量 
或 引用 使 用 let 声 明 ; var 仅 用 于 声明 函数 整个 作用 域内 需要 使 用 的 变 


| 三 :| 


里 。 








字符 串 模 板 
字符 串 模 板 设 计 主 要 来 自 其 他 语言 和 前 并 模板 的 设计 思想 ， 即 当 有 


字符 串 内 容 和 变量 混合 连接 时 ， 可 以 使 用 字符 囊 模板 进行 更 高 效 的 代码 
书写 并 保持 代码 的 格式 和 整洁 性 。 如 果 没有 字符 串 模板 ， 我 们 依然 需要 





像 以 前 一 样 借助 “字符 串 十 操作 符 ” 拼 接 或 数组 join0 方 法 来 连接 多 个 字符 
申 变 量 。 


let name = 'ouven'，; 

let str = ‘<h2>hi, ${name}</h2> 
<p>hello, world!</p> 
<p>2016-12-12</p> 


了 


要 注意 的 是 ， 字 符 串 模板 不 会 压缩 内 部 的 换行 与 空格 ， 而 是 按照 原 
有 的 格式 输出 ， 只 将 变量 内 容 填充 蔡 换 挥 。 实 际 的 项 目 开 发 中 ， 如 果 使 
用 ECMAScript 6 的 转译 工具 将 ECMAScript 6 的 代码 处 理 生成 


ECMAScript 5 的 代码 后 运行 ， 格 式 可 能 丢失 ， 因 为 ECMAScript 5 及 之 前 
的 版 本 中 字符 串 是 没有 字符 串 模板 格式 的 。 








解构 赋值 


个 人 认为 ， 解 构 赋 值 是 ECMAScript 6 的 一 个 亮点 功能 ， 它 解决 了 赋 
值 的 编码 元 余 和 模块 按 需 导出 的 问题 。 解 构 赋值 主要 分 为 数组 解构 和 对 
象 解构 。 


let [a, b, c] = [11, 22]; 


let {one, two, three} = {two:2, three:3, one:1}; 


[a，b] = [b，a]; // 交换 a、b 变量 的 值 


console.log(c); // undefined 








这 里 数组 解构 是 严格 按照 数组 下 标 依次 对 应 顺序 赋值 的 ， 如 果 赋 值 





的 常量 个 数 不 够 ， 则 对 应 下 标的 变量 默认 为 unndefined; 如 果 和 常量 个 数 超 
出 ， 则 多 余 的 会 被 舍弃 ， 所 以 顺序 很 重要 ;而 对 象 解构 赋值 则 是 根据 对 
象 引 用 的 键 名 来 进行 赋值 的 ， 可 以 无 视 顺 序 。 男 外 ， 如 果 某 个 变量 已 经 
被 声明 ， 就 不 能 再 参加 解构 赋值 了 ，JavaScript 执 行 引擎 会 把 它 当 作 重 复 
声明 处 理 ， 而 ECMAScript 6 中 任何 变量 的 重复 声明 是 绝对 不 允许 的 ， 所 
以 会 直接 提示 Uncaught TypeError 错 误 。 














数组 新 特性 


ECMAScript 6 也 为 数组 内 置 对 象 添 加 了 较 多 的 新 特性 ， 主 要 包括 .…. 
复制 数组 和 新 增 的 数组 API。 


const arr = ['ouven' , 'zhang' ] ，; 


const newArr = [...arr]; //['ouven' , 'zhang'" | 


需要 注意 的 是 ， 这 里 的 .进行 的 数组 复制 是 浅 拷贝 〈 关 于 深 找 贝 和 
浅 撕 贝 的 区 别 此 处 不 再 著述 ) ， 而 新 增 的 数组 方法 则 主要 包括 以 下 几 
种 ， 如 表 3-4 所 示 。 








表 3-4 ECMAScript 6 数组 新 增 方 法 











描述 
用 于 将 类 数组 对 象 〈 包 括 对 象 [array-like 
objectl 和 可 志 历 对 象 ) 转化 为 真正 的 数组 


Array.from 





Array.of 可 以 将 传 入 的 一 组 参数 值 转换 为 数组 


可 以 在 当前 数组 内 部 将 指定 位 置 的 数组 项 复 
Array.prototype.copyWithin| 制 到 其 他 位 置 ， 然 后 返回 当前 数组 ， 使 用 
copyWithin 方 法 会 修改 当前 数组 


| Le 填充 一 个 数组 ， 会 改变 原来 的 











Amypooypema 。 必 了 我 册 第 一个 符合 条 件 的 数组 元 素 ， 有 上 


Array.prototype.findIndex | 用 来 返回 某 个 特定 数组 元 素 在 数组 中 的 位 置 








除 此 之 外 ，ECMAScript “6 中 还 添加 了 更 多 关于 数组 迭代 的 方法 : 
entries ()、keys() 和 values ()， 均 可 用 来 遍历 数组 。 它 们 都 返回 一 个 迭代 
嚣 对象 ， 也 可 以 用 for...of 循 环 进行 珊 历 ， 区 别 是 keys 0 是 对 数组 键 名 进 
行 表 历 、values 0 是 对 数组 刍 值 进行 通 历 ，entries () 是 对 数组 中 键 值 对 进 
行 轴 历 ， 另 外 Array.prototype[Symbol.iterator] 也 可 以 用 来 获取 过 历数 组 
对 象 的 迭代 器 。 





let colors = ['red', 'blue', 'green', 'green'|]; 


console.1log(Array.from(colors)); // ["red", "blue", "green", "g 
console.log(Array.of('red', 'blue', ‘'green', ‘'green')); // | 


"green"] 


console.log(colors.find(function(color) { 
If (color === 'green') { 
return color; 


} 
})); // green 


console.log(colors.findIindex(function(color) { 
if (color === 'green') { 


return color; 


} 
})); // 2 


console.log(colors.fill('black')); // 会 改变 colors 的 值 ，[ "black" 
"black"] 





// 恢复 原 数 组 后 再 操作 
colors = ['red', 'blue', 'green', 'green']; 


console.1log(colors.copyWithin(©0, 3)); // ["green", "blue", "gree 


console.log(colors.keys()); // 输出 ArrayIterator 人 对 象 


console.log(colors.entries()); // 输出 ArrayIterator 人 {对象 


ECMAScript 6 对 水 数 参 数 进 行 了 新 的 设计 ， 对 原 有 函数 参数 设计 糟 
糕 的 部 分 进行 改善 ， 主 要 添加 了 默认 人 参数、 不 定 参 数 和 拓展 参数 。 





// 默认 参数 
function sayHi(name = 'ouven')t{ 


console.log( “Hello ${name}. ); 


} 
sayHi( ); // Hello ouven 


// 不 定 参 数 
function sayHi(...name)t 


// 这 里 name 的 值 为 ['ouven'，'zhang'] 





console.log(name.reduce((a,b)=> Hello ${a} $fb} )); 
} 


sayHi('ouven', 'zhang'); // Hello ouven zhang 


// 扩展 参数 
let name = ['ouven', 'zhang']; 
function sayHello(name1, name2)t{ 


console.1log( Hello ${name1} ${name2} ); 


sayHello(...name); // Hello ouven zhang 





通过 实例 大 家 应 该 都 掌握 了 这 些 方法 ， 其 中 不 定 参 数 和 扩展 参数 可 
以 认为 恰好 是 相反 的 两 个 模式 ， 不 定 参 数 是 使 用 数组 来 表示 多 个 参数 ， 
扩展 参数 则 是 将 多 个 参数 映射 到 一 个 数组 。 同 时 也 有 几 个 地 方 需要 注 
意 ， 这 里 不 定 参 数 的 ... 和 数组 复制 的 ... 是 有 区 别 的 ， 不 定 参 数 可 以 使 用 
函数 的 形 参 来 表示 所 有 的 参数 组 成 的 列表 。 以 前 的 arguments 变 量 也 有 类 
似 的 作用 ， 但 是 arguments 不 是 真正 的 数组 ， 除 了 存放 参数 的 列表 外 ， 
arguments 还 有 length 属 性， 严格 来 说 arguments 是 一 个 类 数组 对 象 ， 而 不 
定 参数 则 是 一 个 完全 的 数组 ， 这 也 是 不 定 参 数 相 对 于 arguments 的 优势 ， 
更 加 方便 我 们 使 用 ， 所 以 建议 使 用 不 定 参 数 来 代 瞧 arguments。 当 然 ， 如 
果 在 ECMAScript 6 中 定义 了 "mse strict'"，arguments 的 使 用 也 基本 被 限制 
了 ， 所 以 我 们 应 该 尽量 使 用 新 的 函数 参数 。 


入 头 函 数 


箭头 函数 的 设计 来 自 于 CoffeeScript 等 语言 的 特性 ，ECMAScript 6 标 
准 中 也 添加 了 这 个 特性 ， 让 短 函 数 的 声明 更 加 方便 。 


// 箭头 函数 
[1, 2, 3].forEach((x) => x * x); 


(() => 芋 
console.1log('Hello ouven zhang.'); // Hello ouven zhang. 


})(); 


需要 注意 的 是 ， 箭 头 函 数 没有 完整 的 执行 上 下 文 ， 因 为 其 this 和 外 
层 的 this 相 同 ， 可 以 理解 为 它 的 执行 上 下 文 只 有 变量 对 象 和 作用 域 链 ， 
没有 this 值 。 


在 JavaScript 中 ， 代 码 的 执行 上 下 文 由 变量 对 象 、 作 用 域 链 和 this 
值 组 成 。 但 箭头 函数 与 外 层 执行 上 下 文 共享 this 值 。 如 果 需 要 创建 具 
有 独立 上 下 文 的 函数 ， 束 不 要 使 用 箭头 函数 。 


增强 对 象 





在 ECMAScript 6 中 ， 对 象 的 使 用 变 得 更 加 方便 。 你 可 以 在 定义 对 象 
时 通过 属性 简写 、 变 量 作为 属性 名 或 省 略 对 象 函数 属性 的 书写 等 方式 来 
提高 编码 的 效率 。 下 面 的 书写 方式 就 简洁 多 了 。 





const name = 'ouven'，; 


const people = { 


// 属性 简写 





name, 
// 返回 变量 或 对 象 作为 属性 名 
[getkey('family')]: 'zhang', 
// 对 象 方法 属性 简写 声明 

















SayHiI( ){ 
console.1log( Hello ${this.name} ${this.family} ); 


people.sayHi(); // Hello ouven zhang 


function getkey(key)t 


return key; 





这 里 没有 太 多 需要 注意 的 地 方 ， 但 为 了 使 代码 便于 维护 和 理解 ， 还 
是 建议 尽量 不 将 变量 或 对 象 作为 对 象 的 属性 名 ， 这 样 不 容易 阅读 。 





类 


JavaScript 没 有 类 这 一 点 一 直 是 ECMAScript 设 计 里 比较 糟糕 的 地 
方 ， 这 也 导致 了 在 ECMAScript 6 以 前 定义 类 的 方法 以 及 类 的 继承 方式 多 
种 多 样 。 就 类 的 继承 方式 来 说 ， 基 本 思路 就 有 原型 链 继承 、 构 造 函数 继 
承 、 实 例 继承 和 拷贝 继承 几 种 ， 但 每 种 方法 多 多 少 少 都 有 上 自己 的 缺陷 ， 








因为 它们 都 不 是 真正 的 类 继承 ， 例 如 会 出 现 子 类 不 一 定 是 父 类 的 实例 、 
子 类 和 父 类 共享 一 个 实例 等 糟糕 的 情况 。ECMAScript 6 添加 了 class 关 键 
字 ， 一 切 便 都 有 章 可 循 了 。 


class Aminal{ 
constructor() { 


WA i 


class People extends Aminalf{ 
constructor(contents = {}) { 
super(); 
this.name = contents.name; 


this.family = contents.family; 


} 
sayHi() { 

console.1log( Hello ${this.name} ${this.family}  ); 
} 


let boy = new People({ 
name: 'ouven', 
family: "zhang， 
}); 


boy.sayHi(); // Hello ouven zhang 


当然 有 了 class， 束 有 extends， 对 于 开发 者 来 说 ， 使 用 class 很 大 的 好 
处 是 实现 一 个 类 的 代码 模块 只 能 在 一 个 地 方 定义 ， 想 想 以 前 我 们 可 以 在 
代码 中 的 任意 位 置 去 扩展 基 类 的 prototype 属 性 ， 从 某 种 意义 上 来 说 ， 
class 类 声明 解决 了 这 个 之 前 设计 糟糕 的 地 方 ， 对 代码 的 规范 性 和 严谨 性 
都 提出 了 更 好 的 限制 方案 。 








模块 module 





ECMAScript ”6 引入 了 模块 引用 规范 ， 这 也 是 之 前 语言 标准 上 没有 
的 。 这 样 现 有 的 JavaScript 模 块 化 规范 又 多 了 一 种 选择 : import/export。 


// 简 单 的 模块 导入 导出 示例 
import {sayHi} from'./people'; 


export default sayHi; 








需要 注意 的 是 ， 使 用 default 导 出 时 要 尽量 将 其 他 模块 需要 使 用 的 部 
分 属性 导出 ， 不 要 导出 整个 对 象 ， 因 为 这 样 会 导出 一 些 不 需要 的 东西 ， 
如 果 使 用 模块 按 需 内 容 导 出 ， 部 分 ECMAScript 6 的 打包 工具 可 以 使 用 更 
态 树 分 析 的 方法 来 自动 移 除 程序 运行 时 不 需要 的 代码 ， 例 如 文 持 Tree- 
shaking 实 现 方式 的 思路 ， 将 原 有 代码 中 未 被 导出 或 未 使 用 到 的 代码 部 分 
作为 无 效 代码 移 除 抒 ， 这 样 在 开发 后 期 模块 打包 优化 的 时 候 束 很 有 用 
了 。 











JavaScript 之 前 的 模块 化 规范 比较 多 ， 包 括 AMD、CMD、 
CommonJs， 现 在 又 多 了 ECMAScript ”6 的 import/export。 所 以 为 了 统 
一 ， 选 择 模块 开发 规范 时 应 尽量 遵循 语言 标准 的 特性 。 


循环 与 从 代 器 Iterator 





到 了 ECMAScript 6 阶段 ，JavaScript 实 现 循环 的 方式 就 比较 多 了 ， 除 
了 do...while、for 循 环 ， 还 可 以 使 用 for...in 来 遂 历 对 象 ( 注 意 不 要 用 
for...in 来 表 历 数组 ， 因 为 所 历 出 来 的 键 不 是 数字 ， 而 且 在 部 分 浏览 器 中 
会 产生 乱 序 ) 。 如 果 裔 历数 组 的 话 ， 则 可 以 使 用 for...of、map、 
forEach， 需 要 注意 的 是 ， 使 用 map、forEach 这 类 方式 的 一 个 好 处 是 将 循 
环 遇 历 的 数组 元 素 指定 到 一 个 具体 的 处 理 函 数 中 进行 处 理 ， 这 样 的 函数 
一 般 是 个 纯 函 数 ， 但 缺陷 是 用 它 时 不 能 直接 跳出 整个 循环 ， 只 能 跳出 当 
前 单 步 循环 。 所 以 数组 循环 遍历 最 佳 方式 是 for...of， 此 外 for..of 也 可 以 
用 来 遍历 Map、Set、WeakMap、WeakSet 等 集合 。Interator 和 迭 代 器 的 加 
入 则 让 志 历 数组 、 对 象 和 集合 的 方式 更 加 灵活 可 控 ，Interator 可 以 控制 
每 次 单 步 循环 触发 的 时 机 ， 不 用 一 次 过 历 所 有 的 循环 。 





纯 函 数 一 般 指 返回 值 完 全 由 传 入 的 参数 来 决定 的 函数 ， 即 对 于 同 
一 个 参数 输入 ， 在 任何 情况 下 的 函数 返回 结果 都 是 相同 且 唯 一 的 。 例 
如 数组 的 slice0 可 以 认为 是 一 个 纯 函 数 ， 而 random0O 则 不 是 纯 函 数 。 





以 数组 这 历 为 例 〈 其 他 对 象 志 历 的 方法 与 此 类 似 ) ， 我 们 先 看 一 下 
直接 欠 代 的 方式 和 用 Iterator 友 代 器 实现 的 方式 有 什么 区 别 。 





// for.. .of 遍历 实现 


const numbers = [1, 2, 3, 4, 5]; 


for(let number of numbers ){ 


console.1log(number); 


// 和 迭代 器 遍历 数组 


const numbers = [1, 2, 3, 4, 5]; 





let iterator = numbers[Symbol.iterator](); 
let result = iterator.next(); 


console.log(result.value); //1 


//...doSomething1 
result = iterator.next(); 


console.log(result.value); //2 


//...doSomething2 
result = iterator.next(); 


console.log(result.value); //3 


//...doSomething3 
result = iterator.next(); 


console.log(result.value); //4 


//...doSomething4 
result = iterator.next(); 


console.log(result.value); //5 


相信 大 家 很 快 便 看 懂 Interator 和 for...of 的 区 别 了 。Interator 可 以 在 循 
环 开始 后 任意 的 地 方 进行 数组 的 单 步 循环 ， 当 循环 迭代 中 每 次 单 步 循 环 
操作 都 不 一 样 时 ， 使 用 Interator 束 很 有 用 了。 如 果 使 用 for...of 则 需要 不 断 
判断 执行 的 次 数 来 执行 不 同 的 单 步 循 环 。 需 要 注意 的 是 ， 这 里 也 可 以 使 
用 Interator 来 循环 一 次 性 遍历 数组 所 有 的 元 素 ， 每 次 Iterator 调 用 nextO 都 
会 返回 一 个 对 象 {done: false，value: item}，done 属 性 是 boolean 值 ， 表 示 
循环 明 历 是 否 完成 ，value 则 是 每 一 步 next() 调 用 获取 到 的 值 。 





如 图 3-6 所 示 ， 为 了 方便 理解 ， 我 们 可 以 把 Interator 理 解 成 为 数组 或 
对 象 上 的 一 个 根据 偏 移 来 访问 内 存 内 容 的 游标 对 象 ， 每 次 调用 next()， 
裔 历 游 标 会 同 后 移动 一 个 地 址 。 男 外 ，Symbol.iterator 的 方法 属性 是 在 
Object 原 型 上 的 ， 所 以 可 以 用 来 吉 历 一 切 可 循环 退 历 的 对 象 。 





.next () .next() .next () 








array[0] array[1] 





array[2] array[3] 


图 3-6 ”Interator 调 用 运行 示意 图 


生成 器 Generator 


如 果 对 Iterator 理 解 较 深 的 话 ， 那 么 你 会 发 现 生成 器 Generator 和 
Interator 的 流程 是 有 点 类 似 的 。 但 是 ，Generator 不 是 针对 对 象 上 内 容 的 
遇 历 控制 ， 而 是 针对 函数 内 代码 块 的 执行 控制 ， 如 果 将 一 个 特殊 函数 的 
代码 使 用 yield 关 键 字 来 分 割 成 多 个 不 同 的 代码 段 ， 那 么 每 次 Generator 调 
用 next() 都 只 会 执行 yield 关 键 字 之 则 的 一 段 代 码 。Generator 可 以 认为 是 





一 个 可 中 断 执 行 的 特殊 函数 ， 声 明 方 法 是 在 函数 名 后 面 加 上 大 来 与 普通 
函数 区 分 。 上 面 数 组 壳 历 的 例子 ， 使 用 Generator 书 写 如 下 。 


const generator = function* (){ 
const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers)t{ 


yield console.1log(number ) ， 


let result = generator(); 


result.next(); // 1 
//...doSomething 
result.next(); // 2 
//...doSomething 
result.next(); // 3 
//...doSomething 
result.next(); // 4 
//...doSomething 
result.next(); // 5 


代码 很 浅显 易 懂 ， 不 过 需要 注意 的 是 ，Generator 遇 到 yield 关 键 字 会 
暂 集 往 后 执行 ， 但 并 不 表示 后 面 的 程序 就 不 执行 了 。 如 果 
console.log(number) 是 一 个 耗 时 的 工作 ， 那 么 程序 只 在 Generator 里 面 暂 
停 ， 外 面 的 程序 仍 会 继续 执行 ， 举 例如 下 。 








const generator = function* (){ 


const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers)t{ 

yield setTimeout(function()t{ 
console.1log(number ) ， 


}, 3000); 


let result = generator(); 
let done = result.next(); 
while('done.done)t{ 


done = result.next(); 


} 


console.1log('finish"'); 


执行 上 述 代 码 会 先 输出 finish， 然 后 才 打 印 数字 ， 结 果 如 下 。 


finish 


1 
2 
3 
4 
5 


这 样 不 束 可 以 用 来 控制 多 个 异步 操作 了 吗 ! 尤其 对 于 Node 服 务 端 处 
理 浏览 占 的 请 求 ， 这 样 来 处 理 异 步 最 得 更 为 优雅 。 


总 络 一 下 实现 数组 或 对 象 循环 过 历 的 方法 : for、 
while(do...while)、 forEach、 map、reduce、for...of、for...in、 Tterator、 
Generator。 除 了 这 些 可 用 的 方式 ， 大 家 也 要 尽量 去 了 解 实现 这 些 循 环 
的 差异 性 和 对 应 的 应 用 场景 。 到 目前 为 止 ， 推 荐 使 用 for...of 或 for...in 
来 处 理 大 多 数 的 循环 过 有 历 场景 。 


集合 类 型 Map+Set+WeakMap+WeakSet 


也 许 很 多 人 会 疑惑 ， 既 然 数 组 和 对 象 可 以 存储 任何 类 型 的 值 ， 为 什 
么 还 需要 Map 和 Set 呢 ? 考虑 几 个 问题 : 一 是 对 象 的 键 名 一 般 只 能 是 字符 
串 ， 而 不 能 是 另 一 个 对 象 ， 二 是 对 象 没 有 直接 获取 属性 个 数 等 这 些 方便 
操作 的 方法 ;三 是 我 们 对 于 对 象 的 任何 操作 都 需要 进入 对 象 的 内 部 数据 
中 完成 ， 例 如 查找 、 删 除 某 个 值 必 须 循 环 遍历 对 象 内 部 的 所 有 键 值 对 来 
完成 。 总 之 我 们 使 用 简单 对 象 的 方式 仍然 显得 很 低 效 ， 没 有 一 个 高 效 的 
方法 集 来 管理 对 象 数 据 。 因 此 ECMAScript 6 增加 了 Map、Set、 
WeakMap、WeakSet， 试 图 弥补 这 些 不 足 。 这 样 我 们 就 可 以 使 用 它们 提 
供 的 has、add、delete、clear 等 方法 来 管理 和 操作 数据 集合 ， 而 不 用 有 具体 
进入 到 对 象 内 部 去 操作 了 ， 这 种 情况 下 Map 和 Set 就 类 似 一 个 可 用 于 存储 
数据 的 黑 盒 ， 我 们 只 管 癌 里 面 高 效 存 取 数 据 ， 而 不 用 知道 它 里 面 的 结构 
是 怎样 的 。 我 们 甚至 可 以 这 样 理解 : 集合 类 型 是 对 对 象 的 增强 类 型 ， 是 
一 类 使 数据 管理 操作 更 加 高 效 的 对 象 类 型 。 








如 果 一 定 要 对 应 来 看 ，Set 可 以 认为 是 增强 的 数组 类 型 ，Map 则 可 以 
认为 是 增强 的 对 象 类 型 ，WeakSet 和 WeakMap 则 对 应 着 Set 和 Map 的 优化 
类 型 ， 所 以 某 种 程度 上 ， 为 了 让 程序 开发 更 加 方便 ， 我 们 有 必要 引入 集 








合 这 类 更 为 高 效 的 类 型 。WeakSet 和 WeakMap 在 生成 时 有 更 加 严格 的 限 
制 : WeakSet 只 存储 对 象 类 型 的 元 素 ， 不 能 过 历 ， 没 有 size 属 性 ; 
WeakMap 只 接受 基本 类 型 的 值 作为 键 名 ， 没 有 keys、values、entries 等 
裔 历 方 法 ， 也 没有 size 属 性 。 


let ws = new WeakSet(); 


ws.add({ data: 42 }); 


let wm = new WeakMap( ); 
wm.set('key', { data: 42 }); 
// .. .这 里 不 再 一 一 列举 它们 的 具体 用 法 





需要 注意 的 是 ，Map 和 Set 都 为 内 部 的 每 个 键 或 值 保持 了 强 引 用 ， 
也 就 是 说 ， 如 果 一 个 存储 的 属性 元 兹 被 移 除 了 ， 回 收 机 制 可 能 无 法 回 
收 它 占 用 的 内 存 ， 容 易 造成 内 存 泄露 ， 所 以 我 们 使 用 时 要 尽 可 能 先 删 
除 引 用 的 相关 内 容 。 相 比 之 下 ， 使 用 WeakSet 和 WeakMap 则 不 会 出 现 
上 述 情况 ， 因 为 它们 并 不 使 用 强 引 用 。 再 总 结 一 下 JavaScript 可 能 出 现 
内 存 泄 露 的 常见 场景 财 包 函 数 、 全 局 变量 、 对 象 属性 循环 引 
用 、DOM 节 点 删除 时 未 解 绑 事件 、Map 和 Set 的 属性 直接 删除 。 和 希望 
大 家 同时 也 要 明白 上 述 五 种 场景 的 具体 情况 是 怎么 样 的 。 

















Promise、Symbol、Proxy 增 强 类 型 


Promise 


接触 过 Promise 的 都 知道 ，Promise 可 以 用 来 避免 异步 操作 函数 里 的 
多 层 仍 套 回 调 〈callback hell ) 问题 ， 因 为 解决 多 层 异 步 场景 最 直接 的 方 
法 是 回调 散 套 ， 将 后 一 个 操作 放 在 前 一 个 操作 的 异步 回调 里 ， 但 如 果 操 
作 层 数 多 了 ， 就 会 很 难 管理 。 











Promise 的 出 现 很 好 地 解决 了 这 一 问题 ，Promise 代 表 一 个 异步 操作 
的 执行 返回 状态 ， 这 个 执行 返回 状态 在 Promise 对 象 创 建 时 是 未 知 的 ， 
它 允 许 为 寞 步 操 作 的 成 功 或 失败 指定 处 理 方 法 。 目 前 Promise 实 现 的 方 
式 较 多 ， 一 般 将 这 些 Promise 实 现 的 规范 分 为 Promise/A 规 范 和 
Promise/A+ 规 范 ， 通 常 我 们 认为 Promise/A 十 规范 是 在 Promise/A 规 范 的 
基础 上 进行 修正 和 增强 形成 的 ， 更 具有 规范 性 。 


我 们 怎样 区 分 Promise/A 十 规范 和 Promise/A 规 范 呢 ? 


o ”符合 Promise/A 十 规范 的 promise 实 现 一 般 以 then 方 法 为 交互 核 
心 。Promise/A 十 维护 组 织 也 会 去 解决 Promise 中 新 发 现 的 问题 
并 改进 完善 规范 ， 因 此 Promises/A 十 规范 相对 来 说 更 加 稳定 。 





o ”Promise/A 十 规范 要 求 onFulfilled 或 onRejected 返 回 promise 后 的 处 
理 过 程 必须 是 作为 函数 来 调用 ， 而 且 调 用 过 程 必 须 是 异步 的 。 





oO ”Promise/A 十 规范 严格 定义 了 then 方 法 链 式 调用 时 onFulfilled 或 
onRejected 的 调用 顺序 。 





判断 是 否 为 Promise/A 十 规范 主要 看 Promise 方 法 是 否 含 有 new 
Pomise(function(resolve， reject) ” {})、then、resolve、all 等 方法 。 男 外 
ECMAScript 6 中 Promise 的 实现 严格 遵循 了 Promise/A+ 规 范 ， 而 jQuery 中 
的 Deferred 就 不 是 Promise/ A 十 规范 。 











// Deferred 精简 后 主要 逻辑 的 源码 


Deferred: function( func ) { 











let tuples = |[ 


// action, add listener, listener list, final state 
[ "resolve", "done", jQuery.Ccallbacks("once memory"), 
[ "reject", "fail", jQuery.Callbacks("onc 
[ "notify", "progress", jQuery.Callbacks("memory") | 
] ， 
state = "pending", 
promise = { 
state: function() {}, 
always: function() {}, 
then: function( /* 成 功 调用 ， 失 败 调用 ， 处理 中 状态 */ ) 人 


promise: function( obj ) 全 




















}, 
deferred = {}; 
jQuery.each(tuples, function( i, tuple ){ 
deferred[tuple[0] + "with"] = list.firewith,; 
}); 
promise.promise(deferred); 


return deferred; 


从 上 面 jQuery 的 代码 中 可 以 看 出 ，jQuery 中 Deferred 实 现 其 实 是 一 个 
工厂 函数 ， 执 行 $.Deferred 之 后 返回 一 个 带 有 state、always、then、 
promise 方 法 的 对 象 ， 它 的 状态 描述 也 作为 自己 的 属性 保存 在 对 象 中 。 
而 ECMAScript 6 中 Promise 的 实例 化 后 内 容 一 般 只 用 来 描述 状态 。 


// ECMAScript 6 的 promise 


{[[PromiseStatus]]: "resolved", [[PromiseValuel]]: "Fulfilled"} 


通常 Promise 的 状态 有 三 种 :Fulfilled 状 态 表 示 Promise 执 行 成 功 ; 
Rejected 状 态 表示 Promise 执 行 失 败 ;，Pending 状 态 表示 Promise 正 在 执行 
中 。 


let status = 1; 
let promise = new Promise(function(resolve, reject)t{ 
if(status === 工 ){ 
resolve('Fulfilled'); 
}elsef{ 


reject('Rejected') 


}); 

promise.then(function(msg)t 
console.1log('successi1:' + msg); 
return msg; 

},function(msg)t{ 
console.1log('fail1i:' + msg); 
return msg; 

}).then(function(msg)t{ 
console.1log('success2:' + msg); 

},function(msg)t{ 


console.1log('fail2:' + msg); 


}); 


我 们 来 看 一 个 具体 的 例子 ，promise 的 then 方 法 接受 两 个 处 理 函 数 ， 


当 status 为 1 时 执行 Fulfilled 成 功 调 用 ， 和 否则 执行 Rejected 失 败 调用 。 然 后 
将 返回 的 状态 返回 给 第 二 个 then 方 法 处 理 ， 并 将 状态 打印 。 输 出 结果 分 
别 如 下 。 


success1: Fulfilled 


success2: Fulfilled 


then 方 法 可 以 将 传 入 参数 的 返回 值 一 直 传递 下 去 ， 如 果 是 异步 的 场 
景 ， 束 可 以 用 这 种 方式 来 解决 多 层 回调 租 套 的 问题 了 。 


// 典型 的 异步 promise 例子 ,希望 它 依次 异步 输出 A、B、C、D 
let promise = new Promise(function(resolve) { 
setTimeout(function() { 
console.1log('A' ); 
resolve( ); 
}，3000); // 延 时 3 秒 打 印 A 
}); 
// 使 用 then 来 链 式 处 理 流程 


promise.then(function() { 

















return new Promise(function(resolve, reject) { 
setTimeout(function() { 
console.log('B') 
resolve( ); 
}，2000); // 延 时 2 秒 打 印 B 
}); 
}).then(function() { 
return new Promise(function(resolve, reject) { 


setTimeout(function() { 


console.1log('cC') 
resolve( ); 
了 ，1000); // 延 时 1 秒 打 印 C 
}); 
}).then(function() { 
return new Promise(function(resolve, reject) { 
console.log('D'); // 不 延 时 打印 D 
}); 
}); 





这 是 一 个 经 典 的 处 理 异步 舱 套 的 例子 ， 需 要 按照 顺序 依次 异步 输出 
A、B、C、D， 这 种 情况 可 以 通过 在 不 同 的 then 处 理 方 法 中 返回 一 个 新 
的 Promise 来 解决 。 返 回 新 的 Promise 里 面具 有 resolve() 和 reject0 方 法 ， 只 
有 当 它 的 resolve 或 reject 被 调用 时 ，Promise 方 法 才 会 继续 执行 ， 进 入 下 
一 个 then 方 法 中 操作 。 如 果 我 们 设置 在 异步 函数 完成 的 最 后 调用 resolve 
0 就 可 以 有 效 控制 Promise 进 入 下 一 个 then 方 法 执行 了 。 理 解 了 这 个 示 
例 ， 就 基本 了 解 了 Promise 处 理 多 层 异 步 的 回调 机 制 。 








需要 注意 的 是 ， 新 的 版 本 浏览 器 放弃 了 ECMAScript 6 中 
Promise.defer() 的 使 用 方式 ， 因 为 它 并 不 是 Promise/A+ 标 准 方法 。 尺 管 
使 用 defer 来 处 理 这 个 问题 会 更 简单 。 


Symbol 


Symbol 是 ECMAScript ”6 新 增加 的 基本 数据 类 型 ， 一 般 用 作 属 性 键 
值 ， 并 且 能 避免 对 象 属性 键 的 命名 冲突 。 


let object = {}; 
let name = Symbol() ， 
let family = Symbol() ， 


object[name] = 'ouven '; 


object[family] = 'zhang'; 


/< 

* 这 里 object 的 值 是 这 样 的 ， 显 示 属 性 的 键 名 是 Symbol1， 这 就 是 Symbol 的 作 上 
去 读 取 对 象 的 属性 

2 


* Symbol(): "ouven '， 














SymbolJ(): 'zhang', 
“】} 
2 

console.1log(object); 


console.1log(typeof name); //symbol 


这 里 因为 对 象 的 键 是 Symbol 变量 ， 而 Symbol 变量 是 不 能 被 重复 声 
明 的 ， 这 种 情况 下 对 象 属性 定义 时 属性 键 就 不 会 被 重复 定义 了 。 





在 ECMAScript ”6 中 ，JavaScript 的 数据 类 型 就 有 七 种 了 : null、 


undefined、boolean、string、number、symbol、object。 


Proxy 


ECMAScript 6 新 增 的 另 一 个 特性 是 Proxy.Proxy 可 以 用 来 拦截 某 个 对 
象 的 属性 访问 方法 ， 然 后 重 载 对 象 的 “. ”运算 符 。 这 似乎 和 我 们 之 前 讲 
到 的 某 种 方法 很 相似 ， 即 defineProperty 中 的 getter 和 setter， 举 例如 下 。 


let object = new Proxy({}, { 
get: function (target, key, receiver) { 
console.log( “getting ${key}. ); 
return Reflect.get(target, key, receiver); 
}, 
set: function (target, key, value, receiver) { 
console.log( .setting ${key}. ); 


return Reflect.set(target, key, value, receiver); 


}); 





// 看 看 之 前 的 一 个 方法 
let object = {}; 


let value; 


Object.defineProperty(object, 'value', { 





// 重 写 get 方法 
get: function() { 
console.log('getting value' ); 


return value; 


}, 





// 重 写 set 方法 
set: function(newValue) { 
value = newValue; 
console.log('setting: ' + newValue); 
}, 
enumerable: true, 
configurable: true 


}); 





// 赋值 或 定义 值 都 会 输出 
// getting value 
// setting value 


object['value'] = 3; 


这 两 段 代码 的 的 作用 类 似 ， 都 是 支持 并 重 定义 对 象 的 getter 和 setter 
方法 进行 自 定义 返回 (这 种 实现 方式 通常 也 叫 对 象 动 持 〉， 一 部 分 前 站 
MVVM 〈Model-View-ViewModel， 后 面 的 章节 我 们 会 详细 讲解 ) 框架 
的 数据 更 变 检 测 就 是 通过 此 手段 实现 的 ， 现 在 通过 实现 Proxy 也 可 实现 
和 defineProperty 类 似 的 功能 ， 当 然 ， 这 只 是 ECMAScript 6 中 Proxy 的 一 
种 比较 典型 的 方法 。 





统一 但 





ECMAScript 6 字符 串 支 持 新 的 Unicode 文 本 形式 ， 同 时 也 增加 了 新 
的 正则 表达 式 修 饰 符 u 来 处 理 统一 码 。 尽 管 如 此 ， 在 实际 的 开发 中 ， 这 
样 处 理 仍 会 降低 程序 可 读 性 和 处 理 速度 ， 所 以 目前 不 建议 使 用 。 


字符 串 ' .match(/./ug) .length === 3 //true 





进 制 数 支持 


ECMAScript ”6 增加 了 对 三 进 制 (b) 和 八进制 〈o) 数字 面 量 的 文 
持 。 可 能 这 个 在 实际 开发 中 很 少 遇 到 ， 上 所 以 大 家 只 要 先 了 解 就 可 以 了 。 








0b111110111 === 503 // true 
00767 === 503 // true 


Reflect 对 象 和 tail calls 尾 调用 


Reflect 可 以 理解 为 原 有 对 象 上 的 一 个 引用 代理 ， 它 用 于 对 原 有 对 象 
进行 赋值 或 取 值 操作 ， 但 不 会 触 肥 对 象 属性 的 getter 或 setter 调 用 ， 而 直 
接 使 用 = 对 对 象 进 行 赋值 或 取 值 操作 会 自动 触发 getter 或 setter 方 法 ， 关 于 
Reflect 的 用 法 可 以 参考 上 面 Proxy 的 例子 。 











tail calls 尾 调用 保证 了 函数 尾部 调用 时 调用 栈 有 一 定 的 长 度 限 制 ， 
这 使 得 递归 函数 即使 在 没有 限制 输入 时 也 能 保证 安全 性 而 避免 发 生 错 


误 。 


function factorial(n, start = 1) { 
if (n <= 1) { 
return start; 
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return factorial(n - 1, n * start); 





// 默认 情况 下 会 发 生 栈 溢出 ， 但 是 在 ECMAScript 6 中 是 可 以 安全 执行 的 
factorial(100000 ) ; 





关于 ECMAScript 6 的 核心 特性 主要 就 这 么 多 ， 本 节 用 尽 可 能 少 的 篇 
幅 系 统 地 介绍 了 ECMAScript 6 的 所 有 新 特性 和 常用 特性 在 使 用 中 容易 犯 
的 错误 及 需要 注意 的 地 方 ， 如 果 想 要 了 解 更 详细 的 关于 ECMAScript 6 设 
计 与 实现 的 内 容 ， 可 以 去 查阅 更 完整 的 书籍 资料 。 


参考 资料 : http : //kangax.github.io/compat-table/。 


3.4.3 ECMAScript 7+ 


2016 年 ，ECMAScript 7 (或 你 ECMAScript 2016) 正式 发 布 。 整 体 
来 说 ， 在 ECMAScript 6 这 个 历史 性 版 本 逐渐 稳定 之 后 ， 后 期 版 本 添加 的 
主要 内 容 已 经 不 是 太 多 了 ， 主 要 包含 窜 指 数 操作 符 与 
Array.prototype.includes， 下 面 我 们 具体 来 看 看 ECMAScript 7 的 内 容 。 





暴 指 数 操 作 符 





x**y 产生 的 结果 等 同 于 Math.pow(x,，y) 
console.10g(2**3); //8 


增加 了 新 的 操作 符 来 进行 堪 指 数 运算 ， 但 其 实 上 ， 这 种 情况 在 前 端 
开发 中 并 不 是 很 党 用。 


Array.prototype.includes 


这 个 数组 方法 主要 用 来 判断 数组 中 是 否 包含 东 个 元 素 。 


let colors = ['red' , 'blue' , 'green' , 'green' ] ， 


console.log(colors.includes('green')) ; // true 


除了 以 上 特性 ， 仍 有 部 分 新 内 容 将 在 ECMAScript 7 后 推出 ， 这 些 也 
征讨 论 比较 多 的 ， 我 们 将 选取 部 分 较为 典型 的 来 讲解 。 


异步 函数 async/await 





在 ECMAScript 6 发 布 时 ， 部 分 特性 的 实现 方案 并 没有 按期 发 布 ， 大 
家 便 预想 这 些 特性 会 在 下 个 版 本 中 出 现 ， 其 中 被 关注 比较 多 的 就 是 异步 
函数 了 ， 那 么 我 们 一 起 来 看 看 ECMAScript 7 中 的 异步 函数 是 怎样 的 。 对 
比 一 下 ECMAScript 6 中 Generator 的 例子 。 





const asyncFunction = async function (){ 
const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers)t{ 
await sleep(3000); 


console.1log(number ) ， 


let result = asyncFunction(); 


console.1log('finish"'); 


输出 结果 为 : 


finish 


1 


Ol 人 wm mm 


我 们 惊奇 地 发 现 ， 异 步 函 数 的 写法 与 Generator 相 比 其实 是 非常 类 似 
的 ， 区 别 在 于 async 函 数 将 Generator 函 数 的 星 号 类 蔡 换 成 async， 将 yield 
蔡 换 成 await， 并 且 少 了 nextO 的 调用 控制 。 实 际 上 也 确实 如 此 ， 我 们 可 
以 认为 async/await 是 对 Generator 的 一 种 封闭 人 简化， 专门 用 于 处 理 
Generator 中 异步 的 场景 。 毕 竟 Generator 可 以 使 用 next() 来 更 加 灵活 地 控 
制 整个 程序 流程 的 执行 ， 处 理 异 步 只 是 一 种 使 用 情况 。 


SIMD.JS -- SIMD APIs + Polyfill 





SIMD (single instruction, multiple data) 代表 的 是 单 指令 多 数据 流 ， 
涉及 并 行 计 算 范 畴 的 语法 指令 ， 可 以 看 出 未 来 JavaScript 有 可 能 会 在 并 行 
计算 领域 内 使 用 。 但 该 特性 目前 在 前 端 开发 中 没有 具体 适合 的 使 用 场 
景 ， 未 来 在 服务 器 端 则 可 能 成 为 一 个 常用 的 增强 特性 。 





我 们 再 来 总 结 一 下 JavaScript 中 实现 异步 的 方法 : setTimeout、 事 
件 监听 、 观 察 者 模式 、$.Deferred、promise、generator、async/wait、 
第 三 方 async 库 等 。 


参考 资料 : https: //tc39.github.io/ecma262/。 


3.4.4 TypeScript 


关于 ECMAScript 6 和 ECMAScript 7 的 内 容 我 们 先 了 解 这 么 多 ， 下 面 
来 了 解 男 一 种 JavaScript“ 方 言 > 一 一 TypeScript。TypeScript 是 2012 年 微软 
发 布 的 一 种 开源 语言 ， 和 与 之 结合 的 开源 编辑 器 VS code (Visual Studio 
Code) 一 起 推出 供 开 发 者 使 用 。 到 今天 ，TypeScript 也 已 经 发 生 了 比较 
大 的 变化 ， 就 语言 特性 来 说 ，TypeScript 基 本 和 ECMAScript 6 的 语法 保 
持 一 致 ， 可 以 认为 是 ECMAScript 6 的 超 集 ， 基 本 包含 了 ECMAScript 6 和 
ECMAScript 6 中 部 分 未 实现 的 内 容 ， 例 如 async/await， 但 仍 有 一 些 少数 
的 差异 性 特征 。 


强 类 型 文 持 





TypeScript 的 数据 类 型 是 强 类 型 的 ， 声 明 时 需要 对 类 型 进行 定义 。 
这 种 规范 在 某 种 程度 上 避免 了 由 于 不 同类 型 之 间 的 变量 赋值 修改 所 导致 
的 问题 ， 但 就 目前 的 开发 方式 和 应 用 场景 来 说 ， 该 特性 仍 没有 很 好 的 应 
用 优势 ， 反 而 增加 了 使 用 的 复杂 上 度 。 


let name:string = 'ouvenzhang' ;，; 


let fullName:String = new String(name) ; 


Decorator 装 饰 器 特性 


Decorator 可 以 用 来 注解 class、property、method 和 parameter， 也 是 
一 种 面 癌 对 象 编程 语言 设计 模式 的 借鉴 ， 目 前 新 版 的 Angular 2 框架 也 引 
入 了 TypeScript 语 法 和 Decorator 使 用 来 描述 代码 复 用 性 定义 。 


class Aminalf{ 
constructor() { 


WA i 


} 


class People extends Aminaltf{ 
constructor(contents = {}) { 
super( ); 
this.name = contents.name,; 
this.family = contents.family; 


} 
@sayHi(this) 


function sayHi(self) { 
console.1log( Hello ${self.name} ${self.family}. ); 


let boy = new People({ 
name: 'ouven', 
family: "zhang， 
}); 


boy.sayHi(); // Hello ouven zhang 


相对 于 ECMAScript 6 而 言 ，TypeScript 的 定位 比较 尴 座 ， 目 前 开发 
者 对 它 的 评价 也 讲 贬 不 一 ， 毕 竟 凭 借 一 两 个 亮点 功能 并 不 能 表现 出 与 
ECMAScript 6 十 规范 的 差异 化 优势 ， 对 于 它 未 来 的 发 展 性 ， 仍 有 待 进 一 


步 验证 。 








3.5 ”前 病 表 现 层 基础 
3.5.1 CSS 发 展 概述 





CSS (Cascading Style Sheets) 是 随 着 前 端 表现 分 离 的 提出 而 产生 
的 ， 因 为 最 早 网 页 内 容 的 样式 都 是 通过 <center>、<strike> 标 签 或 
fontColor 等 属性 内 容 来 体现 的 ， 而 CSS 的 设计 则 提出 使 用 样式 描述 语言 
来 表达 页 面 内 容 ， 而 不 是 用 HTML 的 标签 来 表达 。 关 于 CSS 基 础 的 部 分 
相对 不 多 ， 我 们 将 从 CSS2 开 始 了 解 。 





继 CSS1 后 ，W3C 在 1998 年 发 布 了 CSS2 规 范 ，CSS2 的 出 现 主 要 是 为 
了 解决 早期 网 页 开发 过 程 中 排版 时 表现 分 离 的 问题 ， 后 来 随 着 页 面 表现 
的 内 容 越 来 越 复杂 ， 浏 览 器 平台 厂商 继续 推动 W3C 组 织 对 CSS 规 范 进 行 
更 多 的 改进 和 完善 ， 添 加 了 例如 border-radius、text-shadow、transform.、 
animation 等 更 灵活 的 表现 层 特 性 ， 逐 渐 形 成 了 一 套 全 新 的 W3C 标 准 ， 即 
CSS3.CSS3 可 以 认为 是 在 CSS2 规 范 的 基础 上 进行 补充 和 增强 形成 的 ， 让 
CSS 体 系 更 能 适应 现代 浏览 器 的 需要 ， 拥 有 更 强 的 表现 能 力 ， 尤 其 对 于 
移动 端 浏 览 器 ， 目 前 的 移动 端 浏 览 器 主要 以 Google Chrome 和 Apple 
Safari 浏 览 器 的 webkit 内 核 为 主 ， 由 于 浏览 器 内 核 版 本 相对 较 高 ， 可 以 更 
容易 地 支持 CSS3 特 性 来 完成 更 多 、 更 复杂 的 事情 。 当 然 目 前 CSS4 的 草 
案 也 在 制定 中 ，CSS4 中 更 强大 的 选择 器 、 伪 类 和 伪 元 素 特性 已 经 被 曝 
光 出 来 ， 但 具体 发 布 时 间 仍 不 确定 。 














要 了 解 CSS， 主 要 还 是 要 了 解 CSS 的 属性 和 内 容 ， 那 么 下 面 我 们 就 
从 几 个 方面 来 快速 把 握 CSS 相 关 知 识 的 整体 脉络 。 


3.5.2 ” CSS 选择 器 与 属性 
CSS 选 择 器 


简单 回顾 一 下 CSS 有 哪 几 类 选择 器 : id 选 择 器 、 类 选择 器 、 元 素 选 
择 器 、 组 合 选择 器 、 伪 类 、 伪 元 素 等 。 一 般 认 为 CSS 中 选择 器 属性 优先 
级 顺序 为 ! important> 内 联 样式 〈 权 重 1000) > id 选择 器 〈 权 重 100) > 类 
选择 器 〈 权 重 10) > 元 素 选 择 器 〈 权 重 1) ， 多 种 组 合 情 况 按照 权重 相 加 
的 原则 来 计算 ，!important 优 先 级 最 高 。 


<style> 
#element{ 


display: inline-block; 


.ui-btnf{ 


display: inline-block; 


.Ui-btn:hovert 


color: red; 


divt{ 
display: block; 
width: 200px; 


height: 100px; 


buttont{ 

display: block !important; 
} 
</style> 


<div style="color: red;"></div> 











另外 值得 注意 的 是 ， 元 素 定 义 的 CSS 仿 类 和 伪 元 素 是 不 同 的 。 简 
单 地 说 ， 伪 元 素 会 在 HTML 中 添加 before 或 after 这 类 内 容 ， 而 像 : 
visited、:hover、:first-child、:nth-child、:enable、:checked 这 些 伪 类 则 
不 会 ， 一 般 用 于 表示 元 素 在 用 户 不 同 操作 下 的 状态 或 选择 指定 茶 些 元 
素 的 描述 ， 所 以 读者 们 要 注意 区 分 伪 类 和 伪 元 素 。 


CSS 属 性 





CSS 的 属性 和 值 直 接 决 定 着 元 素 在 页 面 上 的 泻 染 表现 形式 ， 关 于 
CSS 常 用 属性 我 们 可 以 按照 表 3-5 所 示 的 方式 进行 归 类 。 


表 3-5 ”CSS 属 性 分 类 








属性 类 型 属性 名 
布局 类 属性 p osition 类 、 弹 性 布局 fex、 浮 动 float、 对 齐 align 





盒 模型 相关 (margin、padding、width、heigh、 
几何 类 属性 border) 、box-shadow、 渐 变 gradient、backgroud 


类 、transform 类 


font 类 、line-height、color 类 、text 类 (text- 
文本 类 属性 decoration、 text-indent、textoverflow) 、white- 
space、user-select、text-shawdow 等 





动画 类 属性 以 css3 为 主 的 transition、animation 等 
查询 类 Media query 和 IE Hack 等 


尽管 我 们 觉得 CSS 的 属性 很 多 ， 但 是 分 类 以 后 友 现 ， 基 本 束 以 上 几 
类 ， 此 外 均 是 一 些 相 对 不 第 用 的 属性 。 这 里 的 属性 使 用 比较 人 简单， 此 处 
束 不 一 一 展开 了 。 





对 于 开发 者 来 说 ， 在 CSS 编 码 开 发 中 ， 复 洒 的 或 许 并 不 是 学 习 这 些 
属性 对 应 的 值 有 哪些 ， 而 是 在 实际 项 目 中 处 理 CSS 兼 容 性 问题 。 因 为 济 
哎 占 的 版 本 、 平 台 的 多 样 性 导致 浏览 器 对 CSS 属 性 支持 的 差异 性 极 大 ， 
兼容 性 问题 总 是 很 难 完美 解决 ， 遇 到 这 些 情况 束 只 能 冷静 下 来 一 步 步 分 
析 ， 经 验 的 积累 尤为 重要 。 


3.5.3 人 简单 的 应 用 举例 


Css 在 页 面 中 的 实现 非常 灵活 ， 通 常 实现 一 个 效果 的 方式 会 有 很 
多 ， 我 们 需要 根据 具体 的 场景 选择 最 合适 的 方式 来 实现 。 这 里 举 两 个 较 
典型 的 简单 例子 。 











弹性 布局 。 例 如 我 们 要 实现 一 个 等 党 的 三 列 布局 ， 并 根据 父 元 素 的 
宽度 自动 改变 ， 实 现 的 思路 有 很 多 。 





<ul> 


<1 > 菜单 1</1i> 


<1 > 菜单 2</1i> 
<1 > 菜单 3</1i> 


</ul> 


<!1-- 常见 的 方式 --> 





<style> 

“5 
margin: 0; 
padding: 0; 

} 

Ul{ 
width: 100%; 

} 

ul 1if{ 
float: eft 
width: 33.333%; 
list-style-type: none; 

} 

</style> 


<!-- flex 弹性 布局 的 方式 --> 
<style> 
“人 

margin: 0; 


padding: 0; 


Ul{ 


display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 


display: flex; 


} 

ul 1if{ 
-webkit-box-flex: 1; 
-moz-box-flex: 1; 
-webkit-flex: 1; 
-ms-flex: 1; 
flex: 1; 
list-style-type: none; 

} 

</style> 


除 此 之 外 ， 还 有 其 他 的 实现 方式 ， 可 以 灵活 考虑 。 再 如 页 面 中 省 略 
号 的 显示 ， 我 们 要 在 页 面 中 实现 一 行 或 两 行文 字 超 出 时 显示 省 略 号 的 效 
果 ， 就 可 以 这 样 来 写 。 





// 实现 一 行文 字 省 略 号 

pt 

width: 200px; 
height: 36px; 
overflow: hidden; 
text-overflow: ellipsis; 


white-space: nowrap; 





// 实现 两 行文 字 省 略 号 


pt 
width: 200px; 
height: 36px; 
overflow: hidden; 
text-overflow: ellipsis,; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-line-clamp: 2; 
line-clamp: 2; 
-webkit-box-orient: vertical; 
box-orient: vertical; 

} 





第 二 种 实现 方式 需要 考虑 兼容 性 的 问题 ， 推 荐 用 于 移动 端 ， 另 外 也 
可 以 通过 JavaScript 截 取 的 方式 来 达到 类 似 的 效 末 。 再 如 实现 元 又 内 容 居 
中 可 以 选择 margin: 0 ”auto 设 置 居 中 、text-align: center 设置 居中 、 
display: table-cell; vertical-align: middle 设 置 垂 直 居 中 、 绝 对 定位 等 多 种 
为 \ 二。 


这 里 列举 了 几 个 比较 简单 的 例子 ， 前 器 开 发 中 需要 处 理 CSS 的 典型 
场景 很 多 ， 还 有 清除 浮动 、 自 适应 三 列 布局 等 一 些 典 型 的 实现 案例 大 家 
都 可 以 去 了 解 ， 此 处 不 一 一 展开 了 。 








关于 CSS 的 标准 规范 基础 这 里 讲 的 内 容 相 对 较 少 ， 并 不 是 说 CSS 就 
比较 简单 ， 这 些 是 我 们 进行 开发 的 基础 ， 而 且 了 解 这 些 仍 然 不 够 。 实 际 
工程 实践 中 ， 我 们 还 需要 结合 CSS 的 预 处 理 技术 和 组 件 化 UI 框 架 的 设计 
理念 来 局 效 地 实现 具体 功能 的 表现 模块 ， 这 些 内 容 将 会 在 下 一 市 中 具体 
介绍 。 





3.6 “前端 界面 技术 


上 一 节 中 我 们 简单 了 解 了 前 端 表 现 层 的 基础 内 容 ， 这 一 节 中 我 们 来 
结合 实际 的 开发 技术 进行 项 目 实践 。 前 端 界面 技术 主要 指 目前 网 页 表现 
层 上 的 开发 实现 技术 。 下 面 从 以 下 几 个 方面 来 了 解 现代 前 端的 界面 技 
术 : 前 端 表 现 层 CSS 样 式 统 一 化 、 预 处 理 技 术 、 表 现 层 动画 实现 ， 最 后 
我 们 一 起 来 简单 了 解 CSS4 的 发 展 情况 。 


3.6.1 CSS 样式 统一 化 


目前 访问 Web 网 站 应 用 时 ， ss 由 于 浏览 
器 间 内 核实 现 的 差异 性 ， 不 同 浏览 右 可 能 对 同一 元 素 标签 样式 的 默认 设 
置 是 不 同 的 ， we 化 处 理 ， 可 能 会 出 现 同 一 个 网 
页 在 不 同 浏览 器 下 打开 时 显示 不 同 或 样式 不 一 致 的 问题 。 要 处 理 这 一 问 
题目 前 主要 有 三 种 实现 思路 : reset、normalize 和 neat。 














reset 


先 来 看 看 使 用 reset 的 方式 进行 样式 统一 化 的 思路 : 将 不 同 浏 览 器 中 
标签 元 素 的 默认 样式 全 部 清除 ， 消 除 不 同 浏 览 堪 下 默认 样式 的 差异 性 。 
典型 的 reset 默 认 样式 的 代码 如 下 。 


body, hi, h2, h3, h4, hs5, he6, hr, p, blockquote, dl, dt, dd, ul, 


legend, button, input, textarea, th, tdf{ 


margin:0O; 


padding:0; 


这 种 方式 可 以 将 不 同 浏览 右上 大 多 数 标签 的 内 外 边 距 清除 ， 需 要 注 
意 的 是 ， 这 个 例子 中 的 规则 不 能 消除 标签 所 有 的 差异 性 ， 而 这 里 只 是 针 
对 消除 内 外 边 距 差异 性 来 举例 子 ， 其 他 样式 的 差异 性 处 理 方 法 类 似 。 消 
除 默 认 样 式 后 重新 定义 元 素 样式 时 ， 管 第 需要 针对 具体 的 元 系 标 签 重 写 
样式 来 禾 凋 reset 中 的 默认 规则 ， 上 所 以 这 种 情况 下 我 们 币 第 需要 去 重 写 样 
式 来 对 元 素 添 加 各 目的 样式 规则 。 











例如 元 素 标签 <li> 上 默认 会 有 列表 样式 ， 而 我 们 通常 并 不 需要 ， 那 
么 就 可 以 在 reset 中 统一 设置 list-style-type: none 来 处 理 ， 另 外 <li> 与 
<]i> 之 间 可 能 有 回 车 空格 会 导致 元 素 之 间 在 浏览 器 上 有 空 日 间 际 ， 这 
样 的 问题 也 可 以 通过 在 reset 中 统一 设置 float 等 方法 来 解决 。 











normalize 


相对 于 reset 方 式 存在 的 问题 ，normalize 的 思路 稍 有 区 别 ，normalize 
的 做 法 是 在 整 站 样式 基本 确定 的 情况 下 对 标签 元 素 统 一 使 用 同一 个 默认 
样式 规则 ， 例 如 整个 站 点 规定 元 系 之 间 的 最 小 常用 的 内 外 边 距 都 是 
5pX， 则 代码 如 下 。 








body, hi, h2, h3, h4, hs5, he6, hr, p, blockquote, dl, dt, dd, ul, 


legend, button, input, textarea, th, tdt{ 


margin:5px; 


padding:5px; 





这 种 方式 建议 在 网 站 基本 样式 或 规范 确定 的 情况 下 使 用 。 相 对 于 
reset， 这 种 实现 方式 避免 了 较 多 的 样式 重 写 情况 ， 例 如 使 用 reset 上 面 的 
这 种 情况 就 要 在 每 个 出 现 的 元 素 里 面 定义 margin:5px; padding:5px;， 但 
一 般 normalize 只 适用 于 网 站 前 端 基 本 设计 规范 确定 且 统 一 的 情况 下 ， 人 否 
则 normalize 将 失去 意义 而 且 会 导致 页 面 表现 层 样式 不 易 维护 。 














neat 





neat 可 以 认为 是 对 上 和 面 两 种 实现 的 综合 ， 因 为 我 们 通常 不 能 保证 网 
站 界面 上 的 所 有 元 象 的 内 外 边 距 都 是 确定 的 ， 又 不 想 将 所 有 样式 都 清除 
后 再 进行 履 盖 重 写 。 例 如 我 们 只 想 对 文本 相关 元 素 设 置 内 外 边 距 5px， 
而 其 他 的 元 素 则 清除 不 同 浏览 器 的 默认 样式 兰 异 ， 那 么 这 样 定 义 就 显得 


比较 整洁 。 





body, dl, dt, dd, ul, ol, 1i, form, fieldset, button, input, text 
margin:0O; 


padding:0; 


hi, h2, h3, h4, hs, h6, hr, p, blockquote, dt, pre, legend, textar 
margin:5px; 


padding:5px; 


总 结 来 说 ， 前 端 统一 化 CSS 样 式 主要 有 reset，normalize，neat 三 种 
实现 思路 ， reset 是 清除 浏览 器 的 默认 样式 并 保持 在 所 有 浏览 器 中 一 致 ; 
normalize 是 使 用 同一 种 默认 样式 并 在 所 有 浏览 器 中 保持 样式 一 致 ，neat 
则 可 以 认为 是 前 两 种 的 结合 ， 有 具体 需要 根据 网 站 的 设计 特点 来 确定 ， 但 
仍 需 要 保证 默认 样式 在 所 有 浏览 器 中 是 一 致 的 。 三 种 方法 各 有 上 自己 的 使 
用 场景 ， 我 们 可 以 结合 具体 的 团队 项 目 开 发 模式 来 选择 ， 通 常情 况 下 由 
于 网 页 界面 的 设计 是 不 确定 的 ， 所 以 目前 使 用 reset 的 开发 场景 比较 多 。 








一 个 典型 的 CSS reset 的 实现 代码 如 下 。 


body, hi, h2, h3, h4, hs5, he6, hr, p, blockquote, dl, dt, dd, ul, 
legend, button, input, textarea, th, td, article, aside, details, 
header, hgroup, menu, nav, sectiont{ 

margin:0O; 

padding:0; 
} 
html, body{ 

width:100%; 

height: 100%; 


font-size: 18px; 


font-size: 16px; 


font-size: 14px; 


} 
h4, h5, he { 
font-size: 100%; 
} 
at 
text-decoration: none,; 
} 
a:hover { 
text-decoration: underline; 
} 


fieldset, img { 


border: none; 


} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
:focust 
outline: 0; 
-webkit-tap-highlight-color: transparent; 
} 


3.6.2 CSS 了 预 处 理 

















网 页 前 端 表 现 层 通常 是 直接 使 用 CSS 来 实现 的 ， 目 前 CSS 开 发 也 已 


经 进入 了 预 处 理 时 代 。CSS 预 处 理工 具有 很 多 ， 例 如 SASS、LESS、 

Stylus、postCSS 等 。 尽 管 使 用 的 工具 不 同 ， 而 且 各 有 特点 和 优势 ， 但 所 
有 预 处 理工 具 的 最 终 目的 是 一 致 的 : 通过 编写 更 高 效 、 易 管理 的 类 CSS 
脚本 并 将 它们 自动 生成 浏览 器 解释 执行 的 CSS 代 码 ， 现 实 高 效 开 发 和 全 
捷 管 理 。 所 以 CSS 预 处 理 技术 具有 几 个 优势 : 提高 开发 效率 ， 例 如 SCSS 
的 对 套 、 父 级 选择 符 、Mixin、Extend， 或 者 postCSS 的 autoprefixer 等 都 
是 为 了 减少 书写 重复 性 代码 、 提 高 编写 效率 而 设计 的 ; 便于 管理 则 ， 预 
处 理 器 使 用 的 类 CSS 脚 本 可 以 按 模 块 编号 开发 进行 管理 ， 而 且 笠 运 的 是 
大 部 分 预 处 理工 具 都 有 相应 的 模块 引用 机 制 并 能 借助 构建 工具 自动 完成 
编译 打包 。 这 样 我 们 就 可 以 专注 于 业务 模块 层 中 CSS 脚 本 的 开发 了 。 























这 里 我 们 还 是 以 SASS 《或 许 有 人 认为 有 点 落后 ， 但 工具 本 号 并 没 
有 那么 重要 ) 为 例 来 看 看 这 些 预 编译 工具 能 实现 什么 功能 。 其 他 一 些 预 
处 理工 具 是 类 似 的 ， 或 许 还 带 有 一 些 更 加 便捷 的 功能 。 





SASS 的 预 处 理 实现 主要 包含 模块 引用 、 骨 套 、 父 级 选择 符 、 骸 套 
属性 、 注 释 、 变 量 、 数 据 类 型 、 运 算 、 圆 括号 、 函 数 、 算 写 、 变 量 默认 
值 、 规 则 指令 、 控 制 指 令 、mixin、 继 承 extend 等 这 些 属 性 。 有 具体 如 下 。 








// 可 以 方便 地 引入 模块 


Qimport "reset.scss"; 




















// 变量 赋值 与 计算 能 力 ， 可 以 统一 管理 样式 重出 现 的 重复 变量 或 默认 样式 
$width: 5px + 10px; 























$height: 5rem， 
$name: box; 
$attr: margin; 


$content: "empty text' 'default; 


$maxWidth: 375px; 











// 处 理 函 数 
@function getwidth($n){ 








Q@return $n*3rem - 1irem; 

















// mixin 代码 块 。 这 里 与 处 理 函 数 的 区 别 在 于 ，mixin 的 内 容 会 被 全 部 填充 到 引入 的 
// 函数 只 做 过 程 处 理 并 输出 


Q@mixin modi{ 


























width: $width 

height: ($height + 3rem)/2; 
$font-size: 12px; 

$line-height: 20px; 

// 可 以 使 用 #{} 包 住 变量 进行 计算 

font: #{$font-size}/#{$1line-height}; 








.Ui-mod-af{ 
// 设立 使 用 @include 引用 的 mixin 内 容 将 被 填充 进来 
Q@include mod; 
&:hovert{ 
cursor: pointer; 
} 
&:aftert{ 


content: $content; 


.Pp.#{$name}t 
#{$attr}-left: 4px; 


@media screen and(max-width: $maxwidth){ 


#{$attr}-left: 8px; 


// 继承 的 使 用 ， 这 里 .ui-mod-b 继承 了 .ui-mod-a 的 所 有 属性 ， 并 且 禾 写 了 widtl 


.Ui-mod-bf{ 








Qextend .ui-mod-a; 
@if null {width: $maxwidth;} 
width: getwidth(3); 


这 里 用 简单 的 代码 基本 演示 了 SASS 所 有 的 主要 功能 ， 整 体 上 理解 
也 很 简单 。 如 果 需 要 进一步 了 解 可 以 查看 手册 ， 相 信 大 家 就 能 很 快 明日 
怎么 运用 SASS。 我 们 再 看 一 个 postCSS 的 案例 了 解 一 下 什么 是 
autoprefixer (自动 填充 ) 。 


.autoprefixer { 
display: flex; 


transform: tranlatez(0); 


在 上 和 面 的 例子 中 ，postCSS 在 处 理 一 些 需 要 兼容 性 处 理 的 样式 时 会 
目 动 添加 兼容 性 修饰 ， 不 需要 我 们 在 编写 代码 规则 时 重复 编码 ， 这 样 就 
很 高 效 便捷 。 通 过 postCSS， 上 面 的 代码 预 处 理 后 最 终 得 出 结 采 如 下 。 


.autoprefixer { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-transform: translatez(0); 
-ms-transform: translatez(0); 
-0O-transform: translatez(0); 


transform: translateZz(0); 





整体 上 来 看 ，CSS 预 处 理 器 的 语法 特性 和 模式 的 设计 很 像 编程 语言 
的 设计 思路 ， 开 发 完成 后 通过 语法 处 理 器 来 解析 编译 成 标准 规范 的 
CSS， 这 也 和 之 前 讲 到 的 JavaScript 脚 本 开发 的 思路 很 像 ， 使 用 简洁 高 效 
的 衍生 语法 〈 例 如 CoffeeScript 语 法 或 浏览 句 端 的 ECMAScript 6 十 语法 ) 
编译 生成 安全 、 规 范 的 JavaScript 来 运行 。 一 个 高 效 的 预 处 理 语法 工具 一 
般 具 有 以 下 特性 。 


变量 声明 和 计算 。 方 便 一 次 赋值 和 随处 使 用 ， 并 能 进行 简单 运 
算 ， 提 高 开发 管理 效率 。 


O 





o 语法 表达 式 。 例 如 if-else 条 件 语句 、for 循 环 等 简单 语法 的 设计 
能 让 页 面 CSS 规 则 的 生成 更 加 灵活 。 


o ”函数 处 理 。 方 便 多 次 计算 的 地 方 能 统一 复 用 ， 例 如 函数 处 理 和 


Mixin 等 特性 。 


o 属性 的 继承 。 元 系 类 属性 的 继承 在 开发 样式 相似 但 略微 不 同 的 





多 个 模块 的 过 程 中 非常 有 用 ， 可 以 减少 大 量 重复 代码 。 


o 兼容 性 补 全 。 类 似 autoprefixer 这 种 功能 ， 让 开发 者 不 用 过 多 关 
注 不 同 浏览 器 的 兼容 问题 ， 处 理 多 个 浏览 器 兼容 性 的 代码 能 在 
预 处 理 阶 段 自动 生成 补 全 ， 让 一 些 问 题 的 处 理 方式 对 开发 者 透 
明 。 


利用 这 些 功能 特性 ， 开 发 类 CSS 脚 本 相 比 于 原始 的 CSS 就 高 效 很 多 
了 。 无 其 是 在 网 站 基础 结构 样式 开 及 时 ， 可 以 将 不 同 基础 功能 的 实现 使 
用 不 同 的 文件 来 管理 实现 ， 不 同 的 组 件 部 分 也 可 以 通过 不 同 的 文件 进行 
模块 化 管理 。 





3.6.3 ”表现 层 动 男 实 现 


除了 样式 统一 化 处 理 和 预 处 理 技 术 ， 前 端 界 面 男 一 个 很 重要 的 内 容 
束 是 动画 ， 使 用 符合 场景 的 动画 不 仅 可 以 优化 网 站 页 面 中 的 交互 细节 ， 
提高 用 户 体验 ， 还 可 以 让 页 面 更 具有 吸引 力 ， 给 网 站 带 来 更 多 访问 量 。 
通 名 前 端 中 ， 实 现 动画 的 方案 主要 有 6 种 : JavaScript 直 接 实现 动画 、 可 
伸缩 矢量 图 形 (Scalable Vector Graphics，SVG) 动画 、CSS3 
transition、CSS3 animation、Canvas 动 男 、requestAnimationFrame。 这 样 
看 可 能 比较 抽象 ， 因 为 大 家 可 能 都 听 说 过 ， 但 是 并 不 清楚 具体 细 季 。 下 
面 我 们 就 以 一 个 具体 的 场景 应 用 为 例 ， 来 看 看 这 些 动画 的 实现 方案 。 














如 图 3-7， 我 们 需要 在 页 面 上 实现 一 个 方块 元 素 从 左 向 右 移 动 的 效 
果 ， 移 动 一 段 距离 后 停止 移动 或 重新 开始 移动 ， 上 述 6 种 方法 都 可 以 实 
现 。 我 们 先 来 看 看 使 用 JavaScript 直 接 实现 动画 的 方式 。 


;于 应 用 人 广 Bookmarks G Google se Chrome 网 上 应 用 店 


向 右 移动 





图 3-7 动画 效果 示例 


JavaScript 直 接 实 现 动 画 





JavaScript 直 接 实现 动画 的 方式 在 前 端 早期 使 用 较 多 ， 其 主要 思想 是 
通过 JavaScript 的 setInterval 方 法 或 setTimeout 方 法 的 回调 函数 来 持续 调用 
改变 某 个 元 素 的 CSS 样 式 以 达到 元 素 样式 持续 变化 的 结果 ， 下 面 是 实现 
一 个 元 素 从 左 向 右 移动 的 示例 代码 。 





<!IDOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 动 画 移 动 </title> 
<style> 
加 
margin: ©; 
padding: 0; 
} 
divt{ 


width: 200px; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 
<div id="box"></div> 
<script> 
// 获取 页 面 移 动 元 素 


let element = document.getElementById('box"'); 





let left = 0; 





// 设置 定时 循环 调用 改变 元 素 样式 的 marginLeft 属性 ， 当 到 达 浏 览 器 右边 缘 讨 


let timer = SetInterval(function( ){ 











if(left < window.innerwidth - 200){ 
element.style.marginLeft = left + 'px'; 
left ++; 

}elsef{ 


clearIinterval(timer); 


} 
}, 16); 
</script> 
</body> 
</html> 





通过 代码 中 的 注释 ， 我们 很 清楚 地 理解 了 动画 实现 的 原理 和 过 程 。 





JavaScript 直 接 实 现 动 画 也 就 是 不 断 执 行 sSetInterval 的 回调 改变 元 素 的 
marginLeft 样 式 属 性 达 动 画 的 效果 ， 例 如 jQuery 的 animate() 方 法 束 属 于 这 
种 实现 方式 。 不 过 要 注意 的 是 ， 通 过 JavaScript 实 现 动 画 通 常会 导致 页 面 
频繁 性 重 排 重 绘 ， 很 消耗 性 能 ， 如 果 是 稍微 复杂 的 动画 ， 在 性 能 较 差 的 
浏览 器 上 就 会 明显 感觉 到 卡 顿 ， 所 以 我 们 尽量 避免 使 用 它 。 














在 上 面 的 例子 中 ， 有 心 的 读者 会 发 现 ， 我 们 设置 setInterval 的 时 
间 间 隔 是 16ms， 为 什么 呢 ? 一 般 认 为 人 眼 能 辨识 的 流畅 动画 为 每 秒 60 
帧 ， 这 里 16ms 比 1000ms/60 帧 略 小 一 点 ， 所 以 这 种 情况 下 可 以 认为 动 
画 是 流畅 的 。 在 很 多 移动 端 动画 性 能 优化 时 ， 一 般 使 用 16ms 来 进行 节 
流 处 理 连续 触发 的 浏览 器 事件 ， 例 如 对 touchmove、scroll 事 件 进行 节 
流 等 。 我 们 通过 这 种 方式 来 减少 持续 性 事件 的 触发 频率 ， 可 以 大 大 提 
升 动画 的 流畅 性 。 














SVG 动画 


SVG 又 称 可 伸缩 天 量 图 形 ， 原 生 文 持 一 些 动画 效果 ， 通 过 组 合 可 以 
生成 较 复杂 的 动画 ， 而 且 不 需要 使 用 JavaScript 参 与 控制 。SVG 动 画 由 
SVG 元 素 内 部 的 元 素 属 性 控制 ， 通 常 通过 <set>、<animate>、 
<animateColor>、<animateTransform>、<animateMotion> 这 几 个 元 素来 
实现 。<set> 可 以 用 于 控制 动画 延 时 ， 例 如 一 段 时 间 后 设置 SVG 中 元 素 
的 位 置 ， 就 可 以 使 用 <set> 在 动画 中 设置 延 时 ; <animate> 可 以 对 属性 的 
连续 改变 进行 控制 ， 例 如 实现 左右 移动 动画 效果 等 ; <animateColor> 表 
示 颜 色 的 变化 ， 不 过 现在 用 <animate> 就 可 以 控制 了 ， 所 以 用 的 基本 不 





多 ; <animateTransform> 可 以 控制 如 缩放 、 旋 转 等 几何 变化 ; 
<animateMotion> 则 用 于 控制 SVG 内 元 素 的 移动 路 径 。 我 们 来 看 一 个 元 
素 移动 的 例子 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
et 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body> 


<svg id="box" width="800" height="400" version="1.1" xmlns="h 
<rect width="100" height="100" style="fill:rgb(255,0,0);" 
<set attributeName="x" attributeType="XML" to="100" b 
<animate attributeName="x" attributeType="XML" begin= 
to="300" /> 
<animate attributeName="y" attributeType="XML" begin= 
to="0" /> 
<animateTransform attributeName="transform" begin="0s 
from="1" to="2" repeatCount="1"/> 


<animateMotion path="M10, 80 q100,120 120,20 qi140,-50 


repeatCount="1"/> 
</rect> 
</svg> 
</body> 
</html> 


需要 注意 的 是 ，SVG 内 部 元 素 的 动画 只 能 在 元 素 内 进行 ， 超 出 
<svg> 标 签 元 素 ， 束 可 以 认为 是 超出 了 动画 边界 。 通 过 理解 上 面 的 代码 
可 以 看 出 ， 在 网 页 中 <svg> 元 素 内 部 定义 了 一 个 边 长 100 像 素 的 正方 形 ， 
并 且 在 4 秒 时 间 延 时 后 开始 同 右 移动 ， 经 过 4 秒 时 间 同 右 移 动 300 像 素 ， 
同时 正方 形 在 移动 过 程 中 会 放大 1 倍 。 相 对 于 JavaScript 直 接 控制 动画 的 
方式 ， 使 用 SVG 的 一 个 很 大 优势 是 含有 较 丰 富 的 动画 功能 ， 原 生 可 以 绘 
制 各 种 图 形 、 滤 镜 和 动画 ， 绘 制 的 动画 为 矢量 图 ， 而 且 实 现 动 画 的 原生 
元 素 依 然 是 可 被 JavaScript 调 用 的 。 然 而 男 一 方面 ， 我 们 要 明白 ， 元 素 较 
多 日 复 如 的 动画 使 用 SVG 泻 染 会 比较 慢 ， 而 且 SVG 格 式 的 动画 绘制 方式 
必须 让 内 容 藤 入 到 HTML 中 使 用 。 以 前 这 种 动画 实现 的 场景 相对 比较 
多 ， 但 随 着 CSS3 的 出 现 ， 这 种 动画 实现 方式 相对 使 用 得 越 来 越 少 了 。 























CSS3 transition 


CSS3 出 现 后 ， 增 加 了 两 种 CSS3 实 现 动画 的 方式 : transition 和 
animation， 我 们 先 来 看 看 高 效 强大 的 CSS3 过 渡 动 画 transition。 为 什么 称 
为 过 渡 动 画 呢 ? 其 实 transition 并 不 能 实现 独立 的 动画 ， 只 能 在 某 个 标签 
元 素 样 式 或 状态 改变 时 进行 平滑 的 动画 效果 过 渡 ， 而 不 是 蕊 上 改变 。 依 
然 以 元 素 移动 为 例 来 看 下 面 的 代码 。 








<!IDOCTYPE html> 


<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移动 </title> 


<style> 

“+{ 
margin: 0; 
padding: 0; 

} 

divt{ 
width: 200px; 
height: 200px; 
margin-left: 0; 
background-color: red; 
transition: all 3s ease-in-out Os; 
-webkit-transition: all 3s ease-in-out 0Qs; 

} 
.right{ 
margin-left: 400px; 
background-color: blue; 

} 

</style> 
</head> 
<body> 


<div id="box"></div> 


<script> 


let timer = setTimeout(function() { 
let element = document.getElementById('box"'); 
// 改变 元 素 的 样式 


element.setAttribute('class', 'right'"'); 








}, 500); 

</script> 
</body> 
</html> 





这 里 我 们 一 般 通 过 改变 元 际 的 起 始 状态 ， 让 元 素 的 属性 上 自动 进行 平 
请 过 流产 生动 画 ， 当 然 也 可 以 设置 元 系 的 任意 属性 进行 过 渡 变 化 。 它 应 
用 于 处 理 元 素 属 性 改变 时 的 过 渡 动 画 ， 而 不 能 应 用 于 处 理 元 素 独立 动画 
的 情况 ， 人 否则 就 需要 不 断 改 变 元 素 的 属性 值 来 持续 触发 动画 过 程 了 。 




















在 移动 端 开发 中 ， 直 接 使 用 transition 动 画 会 让 页 面 变 慢 甚 至 变 卡 
顿 ， 所 以 我 们 通常 通过 添加 transform: translate3D(0，0，0) 或 transform: 
translateZ(0) 来 开启 移动 端 动画 的 GPU 加 速 ， 让 动画 过 程 更 加 流畅 。 





CSS3 animation 


CSS3 animation 的 动画 则 可 以 认为 是 真正 意义 上 页 面 内 容 的 CSS3 动 
画 ， 通 过 对 关键 帧 和 循环 次 数 的 控制 ， 页 面 标签 元 素 会 根据 设 定好 的 样 
式 改 变 进行 平滑 过 渡 ， 而 且 关 键 帧 状态 的 控制 一 般 是 通过 百分比 来 控制 
的 ， 这 样 我 们 就 可 以 在 这 个 过 程 中 实现 很 多 动画 的 动作 了 。 定 义 动画 的 
keyframes 中 from 值 和 0% 的 意义 是 相同 的 ， 表 示 动 画 的 开始 关键 帧 。to 




















和 100% 的 意义 相同 ， 表 示 动 画 的 结束 关键 帧 。 通 过 CSS3 animation， 上 
述 元 素 移 动 效 果 就 可 以 这 样 来 实现 了 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
margin: 0; 
padding: 0; 
} 

div { 


width: 200px; 
height: 200px; 
margin-left: 0; 
background-color: red; 
animation: move 4s infinite; 
-webkit-animation: move 4s infinite,; 
} 
@keyframes move { 
from { 
margin-left: 0; 
} 
50% { 


margin-left: 400px; 


to { 


margin-left: 0; 


} 
</style> 
</head> 
<body> 
<div id="box"></div> 
</body> 
</html> 


相信 很 多 人 也 很 了 解 了 ，CSS3 实 现 动 画 的 最 大 优势 是 脱离 
JavaScript 的 控制 ， 而 且 能 用 到 硬件 加 速 ， 可 以 用 来 实现 较 复 杂 的 动画 效 
果 。 


Canvas 动 画 


<canvas> 作 为 HITML5 的 新 增 元 素 ， 也 可 以 借助 Web API 实 现 页 面 动 
画 。Canvas 动 画 的 实现 思路 和 SVG 的 思路 有 点 类 似 ， 都 是 借助 元 素 标签 
来 达到 页 面 动 画 的 效果 ， 都 需要 借助 对 应 的 一 套 API 来 实现 ， 不 过 SVG 
的 API 可 以 认为 主要 是 通过 SVG 元 素 内 部 的 配置 规则 来 实现 的 ， 而 
Canvas 则 是 通过 JavaScript API 来 实现 的 。 需 要 注意 的 是 ， 和 SVG 动画 一 
样 ，Canvas 动 画 的 进行 只 能 在 <canvas> 元 素 内 部 ， 超 出 <canvas> 元 素 边 
界 将 不 被 显示 ， 我 们 再 来 看 一 下 前 面 示例 的 Canvas 的 实现 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移 动 </title> 


<style> 
“+{ 
margin: 0; 
padding: 0; 
} 
</style> 
</head> 
<body> 


<canvas id="canvas" width="700" height="550"> 
浏览 器 不 支持 canvas 

</canvas> 

<script> 

let canvas = document.getElementById("canvas"); 

let ctx = canvas.getContext("2d"); 

let left = 0; 

let timer = setIinterval(function() { 
// 不 断 清空 画布 
ctx.clearRect(0, 0, 700, 550); 
ctx.beginpath( ); 
// 将 颜色 块 填充 为 红色 
CtXx.fillStyle = "#f00"， 
// 持续 在 新 的 位 置 上 绘制 举行 











ctx.fillRect(left, 0, 100, 100); 
ctx.stroke( ); 
if (left > 700) { 
clearIinterval(timer); 
} 
left += 1; 
}, 16); 
</script> 
</body> 
</html> 


元 素 DOM 对 象 通过 调用 getContext() 可 以 获取 元 素 的 绘制 对 象 ， 然 
后 通过 clearRect 不 断 清空 画布 并 在 新 的 位 置 上 使 用 flStyle 绘 制 新 矩形 内 
容 来 实现 页 面 动画 效果 。 使 用 Canvas 的 主要 优势 是 可 以 应 对 页 面 中 多 个 
动画 元 素 泻 染 较 慢 的 情况 ， 完 全 通过 JavaScript 来 泻 染 控制 动画 的 执行 ， 
这 吏 避 免 了 DOM 性 能 较 慢 的 问题 ， 可 用 于 实现 较 复 杂 的 动画 。 








requestAnimationFrame 





requestAnimationFrame 是 前 端 表现 层 实现 动画 的 男 一 种 API 实 现 ， 
它 的 原理 和 setTimeout 及 setInterval 类 似 ， 都 是 通过 JavaScript 持 续 循 环 的 
方法 调用 来 触发 动画 动作 的 ， 但 是 requestAnimationFrame 是 浏览 器 针对 
动画 专门 优化 而 形成 的 API， 在 实现 动画 方面 性 能 比 setTimeout 及 
setInterval 要 好 ， 可 以 将 动画 每 一 步 的 操作 方法 传 入 到 
requestAnimationFrame 中 ， 在 每 一 次 执行 完 后 进行 异步 回调 来 连续 触发 
动画 效果 。 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 动 画 移动 </title> 


<style> 
et 
margin: 0; 
padding: 0; 
} 
div { 
width: 200px; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 


<div id="box"></div> 

<script> 

// 获取 requestAnimationFrame API 对 象 

window.requestAnimationFrame = window.requestAnimationFrame | 
window.mozRequestAnimationFrame || window.webkitRequestAnimationF 


window.msRequestAnimationFrame; 


let element = document.getElementById("box"); 
let left = 0; 


// 自动 执行 持续 性 回调 


requestAnimationFrame(step); 





// 持续 改变 元 素 位 置 
function step() { 
If (left < window,.innerwidth - 200) { 
left += 1; 
element.style.marginLeft = left + "px"; 


requestAnimationFrame(step); 


} 

</script> 
</body> 
</html> 


可 以 看 出 ， 和 setInterval 方 法 类 似 ，requestAnimationFrame 只 是 将 回 
调 的 方法 传 入 到 上 自 里 的 参数 中 人 处理 执行 ， 而 不 是 通过 setInterval 调 用 ， 
其 他 的 实现 过 程 则 基本 一 样 。 大 家 有 兴趣 也 可 以 去 比较 一 下 这 两 种 方式 
的 性 能 消耗 情况 ，requestAnimationFrame 是 比 setInterval 性 能 消耗 低 些 
的 。 





总 的 来 看 ， 实 现 动 画 的 方式 主要 包括 这 些 ， 这 里 通过 一 个 简单 的 案 
例 ， 同 大 家 介绍 了 六 种 不 同 动画 实现 方案 的 基本 原理 和 具体 实现 。 虽 然 
这 是 个 简单 的 案例 ， 但 是 复杂 动画 的 实现 ， 也 是 通过 多 个 简单 动画 的 组 
合 实现 的 。 考 虑 到 兼容 性 的 问题 ， 在 项 目 实践 中 ， 一 般 我 们 在 加 面 浏览 
器 靖 仍 然 推 荐 使 用 JavaScript 直 接 实 现 动 画 的 方式 或 SVG 动 画 的 实现 方 
式 ， 移 动 端 则 可 以 考虑 使 用 CSS3 transition、CSS3 animation、canvas 或 





requestAnimationFrame。 





了 解 了 动画 实现 技术 ， 我 们 接 下 来 简单 了 解 一 下 前 端 表现 层 新 版 本 
CSS4 的 情况 。 


3.6.4 CSS4 与 展望 


目前 CSS 的 成 熟 标准 版 本 是 CSS3， 而 且 在 移动 端 使 用 较 多 。CSS4 
的 规范 仍 在 制定 中 ，W3C 也 在 较 早 的 时 间 公 布 了 一 些 正 在 制定 中 的 
CSS4 规 范 ， 例 如 $e > f、 链 接地 址 仿 类 -: any-link 和 : local-link、 语 言 相 
关 伪 类 dir、 新 的 组 分 选择 器 。 这 些 特性 我 们 且 先 不 去 关注 ， 因 为 目前 还 
没 看 出 太 多 亮点 ， 而 且 实用 性 也 不 是 特别 强 ， 相 比 现 有 的 预 处 理 器 的 语 
法 逊色 很 多 。 由 于 兼容 性 问题 ，CSS4 发 布 后 也 会 处 于 与 ECMAScript 6 
类 似 的 处 境 (ECMAScript 6 至 少 还 有 Node.js 文 持 ) ， 需 要 在 前 端 转译 后 
执行 ， 既 然 都 需要 转译 ， 那 便 和 现在 某 个 预 处 理 器 的 语法 规则 没 差别 
了 ， 要 完全 兼容 恐 介 更 是 遥遥 无 期 。 一 种 可 能 的 最 终 解 决 方案 是 和 
ECMAScript 6 一 样 借鉴 现 有 一 些 预 处 理 器 的 优点 ， 整 合 形成 新 的 规范 语 
法 ， 然 后 通过 预 处 理 器 转译 为 最 终 的 CSS。 这 样 一 个 好 处 是 ， 不 用 去 纠 
结 使 用 哪个 预 处 理工 具 ， 全 部 以 CSS4 规 范 为 准 即 可 ， 但 这 只 是 一 种 可 
能 性 。 











简 而 言 之 ，CSS4 的 处 境 将 会 比较 恕 从 ， 目 前 最 新 的 浏览 器 仍 没有 
文 持 CSS4 特 性 的 计划 ， 发 布 后 不 能 兼容 仍 需 要 转译 ， 就 目前 来 看 ， 
CSS4 新 添加 的 特性 优势 并 不 明显 旦 实用 性 不 强 ， 而 且 不 如 现 有 的 预 处 
理 语 法 。 所 以 只 能 看 它 后 面 的 发 展 情况 了 。 


3.7” 啊 应 式 网 站 开 友 技术 


前 面 讲解 了 前 端 界 面 技术 的 CSS 样 式 统 一 化 、 
术 ， 本 节 我 们 一 起 来 看 一 下 现代 前 端 技术 中 男 
式 页 面 实 现 技 术 。 


3.7.1 啊 应 式 页 面 实 现 概述 


通 第 认为 ， 啊 应 式 设计 是 指 根据 不 同 设备 浏览 器 尺寸 或 分 辨 京 来 展 
示 不 同 页面 结 构 层 、 行 为 层 、 表 现 层 内 容 的 设计 方式 。 谈 到 啊 应 式 设 计 
网 站 ， 目 前 比较 主流 的 实现 方法 有 两 种 :一 是 通过 前 端 或 后 端 判断 
userAgent 来 跳 转 不 同 的 页 面 完 成 不 同 设备 浏览 堪 的 适 配 ， 也 束 是 维护 两 
个 不 同 的 站 点 来 根据 用 户 设备 进行 对 应 的 跳 转 ， 二 是 使 用 media query 媒 
体 查 询 等 手段 ， 让 页 面 根据 不 同 设备 浏览 器 自动 改变 页 面 的 布局 和 显 
示 ， 但 不 做 跳 转 。 


























先 看 第 一 种 方案 ， 图 3-8 为 目前 一 种 典型 啊 应 式 站 点 访问 跳 转 的 流 
程 ， 这 里 以 服务 端 通过 判断 请 求 的 userAgent 信 息 为 例 。 要 注意 的 是 ， 在 
浏览 器 端 判 断 UserAgent 执 行 跳 转 也 是 可 以 的 ， 但 是 需要 页 面 脚本 下 载 
完 后 再 执行 判断 跳 转 逻辑 ， 比 服务 端 执 行 跳 转 的 方式 要 慢 。 用 户 使 用 桌 
面 浏览 器 和 移动 端 浏 览 嚣 分别 可 以 访问 到 对 应 的 站 点 ， 但 是 如 果 使 用 于 
面 浏览 堪 直 接 访 问 移 动 站 点 域名 下 Web 站 点 页 面 ，Web 站 点 会 根据 
userAgent 信 息 判 断 进行 302 跳 转 到 对 应 的 果 面 Web 服 务 器 页 面 路 径 下 。 
使 用 移动 设备 直接 访问 昌 面 端 服务 器 站 点 的 流程 与 此 类 似 。 









































图 3-8 ”典型 响应 式 站 点 实现 








这 样 便 可 以 根据 不 同 的 设备 加 载 相应 的 网 页 资源 了 ， 根 据 这 种 思路 
针对 移动 端的 浏览 器 便 也 可 以 请 求 加 载 更 加 优化 后 的 执行 脚本 或 更 小 的 
静态 资源 了 。 根 据 userAgent 进 行 跳 转 会 有 一 定 的 网 络 消耗 ， 但 是 这 种 方 
式 下 必须 这 样 ， 该 实现 方案 适用 于 功能 复杂 并 对 性 能 要 求 较 高 的 站 点 应 
用 ， 我 们 再 来 具体 看 一 下 这 种 情况 存在 的 一 些 问题 。 


o 需要 开发 并 维护 至 少 两 个 站 点 跳 转 来 适 配 不 同 用 户 的 设备 浏览 
器 。 例 如 使 用 www.domain.com 和 m.domain.com 来 分 别 指向 桌 
面 浏览 器 端 和 移动 问 浏 览 器 访问 的 不 同 Web 站 点 服务 ， 然 后 根 
据 userAgent 来 做 对 应 跳 转 。 


o 选择 使 用 哪个 站 点 内 容 由 设备 的 userAgent 信 息 来 判断 ， 无 法 根 
据 屏 侨 尺 寸 或 分 辩 京 来 决定 。 





o 多 了 一 次 跳 转 。 无 论 是 在 前 端 执行 跳 转 还 是 后 台 执 行 跳 园 ， 这 
部 分 逻辑 不 能 少 ， 否 则 用 户 体 验 相 会 变 差 。 





通 第 根据 浏览 器 userAgent 来 实现 跳 转 的 方式 也 很 简单 ， 一 般 可 以 在 
页 面 头 部 插入 一 段 JavaScript 代 码 来 判断 或 在 服务 端 通 过 统一 的 中 间 件 执 
行 跳 转 。 通 常 ， 根 据 userAgent 信 息 执行 页 面 跳 转 的 代码 如 下 。 


// 前 端 页 面 判 断 跳 转 
if (navigator.userAgent.match(/iPhone|iPod|Android|iPad/i)) { 
let hash = window.location.hash, 
params = window.1location.search; 
location.href = '//m.domain.com/path/page.html' + params + (h 
+ hash.substr(1) : "''); 
} 


// Web 服务 器 端 判断 跳 转 
if (this.header['user-Agent'].match(/iPhone|iPod|Android|iPad/i)) 
let hash = this.hash, 
params = this.querystring; 
this.redirect('//m.domain.com/path/page.html ' + params + (ha 
+ hash.substr(1) : "'')); 
} 


再 来 看 第 二 种 方案 。 桌 面 浏览 器 和 移动 端 浏览 器 使 用 同一 个 站 点 域 
名 来 加 载 内 容 ， 只 需要 开发 维护 一 个 站 点 就 可 以 了 ， 然 后 根据 media 
query 来 实现 不 同 屏幕 下 的 布局 显示 ， 适 用 于 访问 量 较 小 、 性 能 要 求 不 
高 的 应 用 场景 ， 例 如 使 用 Bootstrap 这 类 啊 应 式 自 动 布 局 框架 实现 的 网 
站 。 当 然 ， 这 种 方式 也 存在 一 些 明显 的 问题 。 














o 移动 端 浏 览 右 加 载 了 与 更 面 端 浏览 句 相 同 的 资源 ， 例 如 图 片 、 
脚本 资源 等 ， 导 致 移动 端 加 载 到 见 余 或 体积 较 大 的 资源 。 对 于 
网 络 和 计算 资源 相对 较 少 的 移动 端 来 说 ， 这 显然 不 是 一 个 很 好 
的 处 理 方案 。 虽 然 可 以 经 过 一 些 优化 来 减少 一 部 分 移动 端 加 载 
的 内 容 ， 但 是 能 做 的 非 第 有 限 ， 不 能 完全 解决 这 个 问题 。 





o 果 面 端 浏 览 副 和 移动 端 浏览 器 访问 站 点 需要 展示 的 内 容 可 能 不 
完全 相同 ， 这 种 啊 应 式 的 方式 只 实现 了 内 容 布局 显示 的 适应 ， 
但 是 要 做 更 多 差异 性 的 功能 比较 难 。 








o 桌面 端 浏 览 需 和 移动 器 浏览 器 页 面 功能 本 身 具 有 差异 性 ， 使 用 
同一 套 处 理 方 式 ， 会 有 更 多 的 兼容 性 问题 。 











啊 应 式 页 面 设计 一 直 是 一 个 很 难 完美 解决 的 问题 ， 因 为 多 多 少 少 都 
存在 这 些 问题 。 融 着 这 些 问 题 ， 我 们 再 来 看 看 啊 应 式 页 面 设 计 具 体 应 该 
怎样 做 。 先 来 总 结 一 下 上 面 这 两 种 方案 的 所 有 问题 描述 。 


o 能 人 否 使 用 同一 个 站 点 域名 避免 跳 转 的 问题 
o 能 人 否 保 证 移动 端 加 载 的 资源 内 容 最 优 
o 如 何 做 移动 端 和 桌面 端 浏览 器 的 差异 化 功能 


o 如 何 根据 更 多 的 信息 进行 更 加 灵活 的 判断 ， 而 不 仅仅 是 


userAgent 
经 过 综合 性 方 膝 分析， 可 以 得 出 结论 : 合理 的 开发 方式 和 网 站 访问 


架构 设计 是 可 以 解决 上 述 四 个 问题 的 。 下 面 我 们 来 看 看 在 啊 应 式 的 三 层 
结构 上 具体 能 做 什么 处 理 。 


3.7.2 ”结构 层 啊 应 式 


结构 层 响应 式 设 计 可 以 理解 成 HTML 内 容 的 自 适应 泻 染 实 现 方式 ， 
即 根 据 不 同 的 设备 浏览 器 泻 染 不 同 的 页 面 内 容 结 构 ， 而 不 是 直接 进行 页 
面 跳 转 。 这 里 页 面 中 结构 层 演 染 的 方式 可 能 不 同 ， 包 括 前 端 泻 染 数据 和 
后 端 泻 染 数 据 ， 这 样 主要 就 有 两 种 不 同 的 设计 思路 了 : 一 是 页 面 内 容 是 
在 前 端 泻 染 ， 二 是 页 面 内 容 在 后 端 演 染 (也 就 是 直 出 层 ， 我 们 后 面 会 具 
体 讲 到 这 个 ) 。 

















结构 层 数据 内 容 响 应 式 








目前 仍 有 较 多 的 网 站 使 用 的 是 前 后 端 分 离 、 前 端 数据 泻 染 的 方式 实 
现 的 ， 无 其 是 移动 端 页 面 。 这 种 情况 下 如 条 要 做 到 结构 层 啊 应 式 就 要 考 
虚 到 ， 首 先 要 保证 移动 端 加 载 的 内 容 资源 最 小 ， 因 此 会 以 移动 并 优化 资 
源 为 主 ， 保 证 移动 并 页 面 的 首 屏 内 容 优 先 加 载 ， 然 后 通过 寞 步 的 方式 来 
实现 更 面 问 或 移动 端 剩 余 内 容 的 加 载 。 











这 样 似乎 融 没 有 问题 了 ， 其 实 这 样 在 最 先 加 载 的 页 面 HIML 文 件 内 
容 中 ， 呆 面 端 浏览 器 加 载 的 内 容 中 不 可 避免 会 有 少量 的 移动 并 见 余 内 
容 ， 而 且 值得 注意 的 是 ， 一 般 下 载 的 HTML 文 件 内 容 在 桌面 端 和 移动 端 
会 有 差异 化 内 容 存 在 ， 这 是 不 可 避免 的 ， 所 以 我 们 只 能 尽 可 能 减少 差 弄 
化 内 容 来 保证 元 余 资源 减 到 最 小 。 但 即使 不 能 避免 ， 由 于 桌面 端的 计算 
资源 和 网 络 资源 相对 比较 宽容， 这 些 也 是 可 以 接受 的 ， 这 毕竟 比 移动 端 
浏览 器 加 载 蝎 面 端的 元 余 内 容 好 多 了 。 











具体 来 看 ， 我 们 根据 不 同 平台 浏览 器 的 情况 加 载 不 同 的 异步 静态 


JavaScript， 然 后 异步 泻 染 不 同 的 模块 内 容 ， 生 成 不 同 的 表现 层 结构 束 可 
以 如 下 来 实现 。 

















// isMobile 是 根据 userAgent、 屏 幕 尺寸 或 屏幕 分 辩 率 判断 是 否 为 移动 端 设 备 的 纤 














let isMobile = navigator.userAgent.match(/iPhone|iPod|Android|iPa 
if(isMobile)t{ 
require.async(['zepto', './mobileMain'], function($, main)t 
main.init(); 
}); 
}elsef{ 
require.async(['jQuery', './main'], function($, main)t{ 
main.init(); 


}); 


// ./main.js 文件 内 容 
module.exports = { 
init: function()t{ 


$('#article' ).html(PC: 这 是 桌面 端 浏览 器 内 容 ' ) ; 


// ./mobileMain.js 文件 内 容 
module.exports = { 
init: function(){ 


$('#article' ).html('mobile: 这 是 移动 端 浏 览 器 内 容 ' ); 


如 图 3-9 所 示 ， 果 面 端 浏览 占 和 移动 端 浏 览 咒 直接 加 载 到 的 HTML 结 
构 是 相同 的 ， 由 于 页 面 的 数据 内 容 主要 在 前 剖 泻 染 ， 那 么 就 可 以 使 用 异 
步 的 方式 加 载 桌面 端 或 移动 端 不 同 的 JavaScript 资 源 列 表 来 泻 染 不 同 的 前 
端 数据 内 容 了 。 为 了 保证 我 们 使 用 移动 端 打开 的 页 面 加 载 到 相对 最 优 的 
页 面 资源 和 内容， 我 们 也 可 以 使 用 录 步 的 方式 来 加 载 CSS 文 件 ， 这 样 就 可 
以 做 到 根据 移动 端 页 面 和 朱 面 端 页 面 加 载 到 不 同 的 资源 内 容 了。 





前 端 资源 A 列表 : [ jquery ， main”] 





前 端 资源 B 列 表 : [zepto’, mbileMain”] 





SSs 


Web 服 务 器 


移动 端 浏 览 器 


图 3-9 前端 内 容 响 应 式 演 染 方式 





使 用 这 种 方式 尽管 可 以 让 时 面 喘 和 移动 器 复 用 一 个 页 面 并 做 到 页 面 
的 差异 化 ， 但 是 由 于 使 用 了 同一 个 HTML 结 构 模板 为 基础 进行 泻 染 和 操 
作 ， 因 此 页 面 的 功能 实现 仍然 有 部 分 耦合 的 地 方 。 





后 端 数据 泻 染 啊 应 式 


除了 前 端 数据 演 染 的 方式 ， 目 前 还 有 一 部 分 网 站 的 内 容 生成 使 用 了 
后 端 泻 染 的 实现 方式 。 这 种 情况 的 处 理 方式 其 实 可 以 做 到 更 优化 ， 只 要 
尽 可 能 将 昌 面 器 和 移动 的 业务 层 模板 分 开 维护 就 可 以 了 。 在 模板 选择 判 
断 时 仍 是 可 以 通过 userAgent 甚 至 URL 参 数 来 进行 的 。 











// isMobile 是 根据 userAgent、URL 参数 判断 是 否 为 移动 端 设备 的 结果 
let isMobile = this.headers['user-Agent'].match(/iPhone|iPod|Andr 
if (isMobile) { 
res.body = yield render('pages/mobile/main', { 
data: pageData 
}); 
} else { 
res.body = yield render('pages/pc/main', { 
data: pageData, 


moreData: moreData 


}); 


// pages/mobile/main 模板 内 容 
<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 移 动 端 内 容 </title> 
<meta name="viewport" content="width=device-width, initial-sc 
1.0,user-scalable=no"> 
<link rel="stylesheet" href=".,/mobile/path/main.css"> 
</head> 
<body> 
<section>{{ data || safe }}</section> 
<script src="./mobile/main.js"></script> 


</body> 


</html> 


// pages/pc/main 模板 内 容 
<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 桌 面 端 内 容 </title> 
<link rel="stylesheet" href="./pc/path/main.css"> 
</head> 
<body> 
<div>{{ data || safe }}</div> 
<div>{{ moreData || safe}}</div> 
<script src="./pc/main.js"></script> 
</body> 
</html> 


如 图 3-10 所 示 ， 直 出 层 以 Node 为 例 ， 在 生成 页 面 内 容 时 可 以 判断 用 
户 的 userAgent 来 泻 染 不 同 的 HIML 输 出 模板 。 这 里 不 同 的 模板 内 容 可 以 
完全 不 一 样 ， 并 可 以 独立 维护 ， 这 样 就 能 根据 同一 个 地 址 直 出 不 同 的 内 
容 了 ， 例 如 在 果 面 并 或 移动 端 浏 览 占 中 打开 Google 搜 索 首 页 时 ， 同 一 个 
地 址 展示 的 内 容 却 不 一 样 ， 便 是 根据 这 种 思路 来 实现 的 。 当 然 这 里 用 的 
模板 最 好 是 根据 组 件 化 开发 分 开打 包 生 成 的 两 个 不 同 模板 ， 人 否则 后 期 维 
护 成 本 就 比较 高 了 。 














移动 端 浏览 器 








图 3-10 ”后 端 内 容 响应 式 泻 染 方式 





这 种 情况 下 我 们 就 可 以 完全 将 果 面 器 页 面 和 移动 端 页 面 结 构 层 分 开 
管理 了 ， 不 仅 可 以 复 用 共同 的 基础 组 件 ， 还 可 以 差异 化 开发 不 同 的 业务 
组 件 ，JavaScript 资 源 和 CSS 资 源 也 是 完全 分 开 加 载 的 ， 实 现 两 个 端 加 载 
内 容 的 相互 独立 ， 束 解决 了 上 面 描述 的 所 有 问题 。 当 然 ， 越 接近 完美 的 
实现 需要 付出 的 代价 也 往往 越 大 ， 这 种 实现 方式 通常 不 可 避免 地 要 将 加 
面 喘 和 移动 端 结合 起 来 同步 开发 。 大 家 也 可 以 根据 自己 团队 的 技术 架构 
和 具体 情况 来 选择 尝试 这 种 开发 模式 ， 不 仅 如 此 ， 这 种 实现 思路 也 很 适 
合 大 型 应 用 站 点 的 实践 。 














如 图 3-11 所 示 ， 使 用 在 直 出 层 啊 应 式 泻 染 输 出 不 同 页 面 内 容 的 模式 
也 很 容易 结合 业务 接 入 层 进行 大 型 应 用 的 开发 。 使 用 组 件 化 思路 ， 前 器 
工程 师 可 以 专注 于 前 端 模块 的 开发 ， 构 建 后 生成 直 出 层 的 不 同 的 数据 模 
板 ， 直 出 层 则 用 于 调用 业务 层 服务 模块 来 获取 处 理 的 数据 ， 然 后 根据 
userAgent 判 靳 不 同 的 浏览 器 设备 调用 不 同 的 模板 泻 染 出 不 同 的 页 面 结 
构 。 











移动 端 提 取 模 板 


业务 接 入 层 业务 接 入 模块 A 业务 接 入 模块 B 业务 接 入 模块 N 


i 所 


底层 服务 层 数据 缓存 服务 数据 文件 服务 数据 库 服 务 


图 3-11 后 端 响应 式 内 容 泻 染 更 加 复杂 的 染 构 
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结构 层 媒 体 啊 应 式 





通过 对 不 同 开发 模式 中 数据 演 染 思路 的 分 析 ， 我 们 基本 解决 了 结构 
层 HIML 响 应 式 所 面临 的 主要 问题 。 细 节 上 ， 有 一 点 需要 重点 强调 : 结 
构 层 媒体 曙 应 式 的 实现 。 根 据 统计 ， 目 前 主要 网 站 60% 以 上 的 流量 数据 
来 目 图 片 ， 所 以 如 何在 保证 用 户 访问 网 页 体验 不 降低 的 前 提 下 尽 可 能 地 
降低 网 站 图 片 的 输出 流量 具有 很 重要 的 意义 。 





通常 在 我 们 手机 访问 网 页 时 ， 请 求 的 图 片 可 能 还 是 加 载 了 与 加 面 并 
浏览 器 相同 的 大 图 ， 文 件 体 积 大 ， 消 耗 流 量 多 ， 请 求 延 时 长 。 媒 体 啊 应 
式 要 解决 的 一 个 关键 问题 就 是 让 浏览 器 上 的 展示 媒体 内 容 太 十 根据 屏幕 
宽度 或 屏幕 分 辩 率 进行 自 适 应 调节 。 当 然 这 里 提 到 的 媒体 主要 是 指 图 











请 ， 即 我 们 需要 根据 浏览 器 设备 屏 | 屏幕 的 分 辨 率 来 加 载 不 同 大 
小 尺寸 的 图 片 ， 避 人 免 在 移动 并 上 加 载体 积 过 大 的 资源 ， 下 面 来 看 看 前 站 
图 片 啊 应 式 的 几 种 第 见 解决 方案 。 


1. 使 用 Media Query 背 景 图 片 代 蔡 








前 端 结构 层 图 片 响应 式 一 个 常见 的 方案 是 使 用 背景 图 厂 引 入 来 引入 
页 面 上 的 ea 并 在 CSS 中 通过 Media Query 来 判断 加 载 所 需要 的 不 同 背 














景 图 片 ， 这 样 浏览 器 就 会 根据 浏览 器 设备 的 屏幕 宽度 或 屏幕 分 辨 率 来 加 
载 不 同 的 图 片 了 。 
, Image { 


background-image: url('path/image/picture.jpg?w/1080/h/768.jp 
-webkit-background-size: 100% 100%; 


background-size: 100% 100%; 


@media only screen and (max-width: 414px) { 
.image { 


background-image: url('path/image/picture.jpg?w/540/h/384 


@media only screen and (max-width: 375px) { 
.image { 


background-image: url('path/image/picture.jpg?w/270/h/192 


@media only Screen and (max-device-pixel-ratio: 2) { 
.image { 


background-image: url('path/image/picture.jpg?w/270/h/192 


@media only screen and (min-device-pixel-ratio: 2) { 
.image { 


background-image: url('path/image/picture.jpg?w/540/h/384 


例如 此 处 地 址 带 有 ? w/1080/h/768、?w/540/h/384、?w/270/h/192 参 
数 的 图 片 分 别 表示 大 图 片 、 中 图 片 、 小 图 片 。 在 屏幕 宽度 小 于 375 像 素 
或 屏幕 分 辨 挛 小 于 2 时 ， 使 用 小 图 片 展示 ; 如 果 屏 幕 宽度 在 375 像 素 到 
414 像 素 之 间或 屏幕 分 辨 率 大 于 等 于 2 时 ， 则 使 用 中 图 片 显 示 ; 否则 使 用 
大 图 片 显示 。 使 用 这 种 方法 可 以 较 好 地 解决 移动 端 和 拧 面 端 不 同 浏览 器 
下 啊 应 式 图 片 的 加 载 问题 ， 但 是 这 里 的 图 片 由 于 是 背景 图 片 ， 无 法 定义 
页 面 图 片 属性 和 描述 内 容 ， 不 利于 搜索 引擎 优 化 (Search Engine 
Optimization，SEO) ， 也 不 能 在 图 片 加 载 失 败 时 给 予 文字 提示 ， 而 且 如 
果 图 片 内 容 是 动态 生成 的 ， 那 么 就 需要 修改 标签 元 素 的 style 属 性 来 设置 
背景 图 ， 显 然 这 是 不 合理 的 。 



































由 于 高 清 屏 的 特性 ， 以 2 倍 Retina 高 清 屏 的 移动 设备 为 例 ，CSS 中 
的 1px 是 由 2x2 个 屏幕 物理 像素 点 来 泻 染 的 ， 那 么 样式 上 的 border:1px 





在 Retina 高 清 屏 下 会 泻 染 成 2 个 物理 像素 宽度 或 高 度 的 边 枉 ， 有 时 为 了 
追求 1px 精 准 的 还 原 ， 不 得 不 思考 其 他 的 方法 来 解决 这 个 问题 。 实 现 
1px 边 框 的 方式 比较 多 ， 通 常 可 以 设置 元 素 after 或 before 伪 元 素 为 1px 

内 容 ， 并 使 用 transform: scaleY (1/devicePixelRatio) 来 进行 单方 向 

的 缩放 实现 1 个 物理 像素 的 边框 或 内 容 。 对 于 字体 ， 我 们 也 可 以 设置 
transform: scale(.5) 在 浏览 器 中 文 持 显示 小 于 12px 的 文字 。 同 时 如 果 

页 面 的 内 容 因 为 使 用 高 清 屏 而 导致 模糊 ， 则 需要 使 用 -webkit-font- 


smoothing: antialiased 来 尝试 修复 。 








2. Picture 标 签 元 素 


除了 使 用 Media Query 来 实现 图 片 响应 式 的 展示 外 ，W3C 已 经 有 了 
一 个 用 于 实现 啊 应 式 图 形 的 草案 ， 即 新 定义 的 HIML5 标 签 <picture>， 
但 因为 它 还 只 是 草案 ， 目 前 还 没有 较 多 支持 的 浏览 器 ， 因 此 只 能 期 竺 在 
不 和 久 的 未 来 我 们 能 用 上 。 尽 管 目 前 不 支持 ， 但 其 还 是 可 以 作为 一 种 可 选 
的 实现 方案 ，<picture> 元 素 标签 是 一 个 类 似 <img> 展 示 图 片 的 元 素 ， 但 
图 片 内 容 是 由 多 个 源 图 组 成 ， 并 能 根据 屏幕 的 特性 选择 使 用 不 同 的 图 
片 ， 举 例如 下 。 








<picture width="500" height="500"> 
<source media="(min-width: 640px)" srcset="large-1.jpg 1ix, lar 
<source media="(min-width: 320px)" srcset="middle-1.jpg 1ix, mi 
<source srcset="small-1.jpg 1ix, small-2.jpg 2x"> 
<img src="small-1.jpg" alt=""> 
<p>Accessible text</p> 


<noscript> 


<img src="external/imgs/small.jpg" alt="Team photo"> 
</noscript> 
</picture> 


a 





source: 表示 <picture> 的 一 个 图 片 源 ; 

media: 媒体 查询 ， 用 于 适 配 屏幕 尺寸 ; 

srcset: 图 片 链接 ，1x 适应 普通 屏 ，2x 适应 高 清 屏 ; 

<noscript/>: 当 浏 览 器 不 支持 脚本 时 的 一 个 蔡 代 方案 ; 

<img/>: 初始 图 片 ; 另外 还 有 一 个 无 障碍 文本 ， 类 似 <img/> 的 alt 属性 。 


--> 

















<picture> 








从 这 个 例子 来 看 ， 当 用 户 浏览 器 在 屏幕 宽度 大 于 640 像 素 时 ， 如 果 
幕 分 辨 率 为 1 则 使 用 large-1.jpg， 分 辨 率 为 2 则 使 用 large-2.jpg; 当 屏 莫 
宽度 在 320 像 系 到 640 像 素 之 间 时 ， 屏 项 分 辨 率 为 1 则 使 用 middle-1.jpg， 
分 辩 率 为 2 则 使 用 middle-2.jpg; 其 他 情况 下 ， 如 果 屏 幕 分 辨 率 为 1 则 使 用 
small-1.jpg， 分 辨 率 为 2 则 使 用 small-2.jpg。 这 样 就 可 以 根据 不 同 浏览 器 
屏幕 特性 来 解雇 图 片 响应 式 的 问题 了 。 











目前 由 于 大 部 分 主流 的 浏览 器 还 不 支持 <picture> 元 素 ， 但 它 的 原理 
是 我 们 可 借鉴 的 ， 所 以 就 有 了 用 于 图 片 响 应 式 处 理 <picture> 元 素 的 
Polyfill (Polyfill 是 指使 用 第 三 方 手段 让 浏览 器 文 持 浏览 器 原本 并 不 文 持 
的 新 特性 ) 思路 Picturefill 。Picturefil] 是 WwW3C 提 供 的 最 新 的 针对 响应 
式 图 片 的 设计 方案 ， 解 析 的 过 程 主要 如 下 : 通过 JavaScript 脚 本 获取 
<picture> 元 素 中 的 Source 源 以 及 CSS Media Queries 规 则 ， 再 根据 浏览 器 
的 尺寸 或 分 辨 率 信 息 将 对 应 的 图 片 路 径 赋 值 给 <img> 标 签 的 src 属 性 来 加 
载 不 同 的 图 片 ， 从 而 兼容 现 有 不 文 持 <picture> 元 素 的 浏览 器 。 相 比 之 

















下 ， 这 种 方式 也 为 图 片 啊 应 式 提供 了 为 一 个 可 选 的 方 采 ， 但 仍 需 要 考虑 
Picturefill 的 性 能 解析 问题 ， 尤 其 是 在 移动 并 图 片 较 多 的 页 面 ， 对 应 每 个 
图 片 都 需要 去 解析 ， 可 能 会 因为 解析 速度 慢 而 阻塞 其 他 页 面 脚 本 逻辑 的 


执行 。 





这 里 要 注意 的 是 ， 浏 览 器 端的 Polyfil 和 shim 差 别 很 小 ， 其 实 可 以 
认为 基本 是 没有 区 别 的 ， 都 是 为 了 解决 旧 的 浏览 右 对 于 新 特性 的 文 持 
和 兼容 性 问题 。 例 如 ，es5-shim.js 是 为 了 让 旧 的 浏览 器 支 
持 ECMAScript 5 的 特性 ;Picturefi 是 为 了 让 旧 的 浏览 右 文 持 解 析 
HTML5 的 <picture> 新 标签 。 





3. 模板 判断 啊 应 式 图 片 


在 前 端 泻 染 数 据 的 开发 模式 下 ， 使 用 前 端 模板 进行 判断 渔 染 输出 不 
同 的 图 片 是 最 简单 、 最 直接 的 啊 应 式 图 厂 实 现 方式 。 我 们 可 以 判断 浏览 
器 userAgent 或 检测 是 否 高 清 屏 let isRetina= window.devicePixelRatio > 1; 
来 填充 不 同 尺寸 的 图 片 地 址 到 页 面 模板 中 。 这 种 方法 实质 上 和 <picture> 
元 系 的 Polyfil 思 路 类 似 ， 但 是 更 直接 、 更 易 理 解 实 现 。 例 如 直接 在 前 端 
泻 染 的 模板 中 就 可 以 如 下 使 用 。 

















{% if isMobile && isRetina %} 





<img src="{{path}}/picture.jpg?w/540/h/384" alt=" 中 图 "> 


{% elseif isMobile %} 





<img src="{{path}}/picture.jpg?w/270/h/192" alt=" 小 图 "> 


{% else %} 
<img src="{{path}}/picture.jpg?w/10680/h/768" alt=" 大 图 "> 





{% endif %} 


这 里 前 端 模 板 首先 判断 浏览 器 是 否 为 移动 端 浏览 器 ， 同 时 判断 屏幕 
清晰 度 ， 寿 为 移动 端 浏览 器 且 为 高 清 屏 幕 ， 则 使 用 中 图 片 ， 如 果 是 移动 
端 浏览 器 ， 但 不 是 高 清 屏幕 ， 则 使 用 小 图 片 ;， 否则 为 更 面 端 浏览 器 使 用 
大 网 片 泻 染 。 用 这 种 方式 处 理 起 来 就 很 直接 了 ， 当 然 这 种 方式 除了 能 在 
前 端 模 板 数据 泻 染 时 使 用 以 外 ， 也 能 应 用 于 后 人 台 或 直 出 层 页 面 模板 的 判 
断 。 所 以 在 目前 <picture> 元 素 文 持 不 成 熟 且 不 想 用 背景 图 片 代 蔡 的 方式 
前 提 下 ， 使 用 模板 来 直接 判断 是 很 适用 的 方案 。 




















4. 图 片 服 务 器 判断 输出 内 容 


如 末 觉 得 在 模板 中 使 用 判断 的 方式 泻 染 不 同 的 图 上 请 依 然 显得 比较 矿 
烦 ， 我 们 也 可 以 在 图 片 服务 器 上 进行 自 适 应 修改 。 试 想 ， 如 果 将 图 片 输 
出 的 判断 逻辑 放 在 后 台 图 片 静 态 服 务 嚣 或 内 容 分 发 网 络 (Content 
Deliver Netvork，CDN) 上 和 处理， 就 不 用 关心 这 些 问 题 了 ，CDN 的 基本 
思想 是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 环节 ， 
实现 内 容 的 快速 、 稳 定 传 输 。 通 常 这 种 方案 是 通过 浏览 器 访问 服务 器 图 
片 时 带 上 浏览 器 的 userAgent 或 UREL 参 数 等 信息 来 实现 的 ， 服 务 器 读 取 到 
这 些 信息 后 结合 userAgent 的 不 同 浏 览 占 特点 输出 不 同 大 小 的 图 片 。 总 
之 ， 可 以 简单 理解 为 将 设备 浏览 器 的 判断 放 在 图 片 服 务 器 上 实现 ， 对 于 
同一 个 图 片 URL 使 用 什么 尺寸 的 图 片 输出 完全 由 图 厂 服 务 器 决定 。 











这 是 一 个 服务 站 的 解决 方案 ， 优 点 是 前 端 几乎 不 用 做 任何 修改 就 可 
以 实现 按照 不 同 的 设备 屏幕 特点 呈现 不 同 大 小 的 图 片 ， 因 此 可 以 快捷 地 
应 用 于 历史 的 项 目 迁 移 改造 中 ， 而 且 不 会 有 羔 容 性 问题 。 例 如 在 前 端 图 
片 的 请 求 里 可 以 带 上 请 求 的 简单 参数 ， 这 样 服务 器 不 仅 可 以 自动 输出 对 
应 的 图 片 内 容 ， 而 且 还 可 以 根据 指定 的 参数 进行 优化 格式 输出 。 











<img src="{{path}}/picture.jpg?retina=2&format=webp" alt=" 图 片 "> 


3.7.3 ”表现 层 啊 应 式 


了 解 完结 构 层 啊 应 式 ， 我 们 再 来 看 一 下 表现 层 啊 应 式 的 具体 实现 。 
这 里 至 少 要 了 解 两 个 方面 的 内 容 : 啊 应 式 布局 和 屏幕 适 配 布局 。 啊 应 式 
布局 是 根据 浏览 器 宽度 、 分 状 率 、 模 屏 、 竖 屏 等 情况 来 自动 改变 页 面 元 
素 展 示 的 一 种 布局 方式 ， 一 般 可 以 使 用 栅 格 方式 来 实现 ， 实 现 思 路 有 两 
种 : 一 种 是 加 面 端 浏览 器 优先 ， 扩 展 到 移动 端 浏览 右 适 配 ， 力 一 种 则 是 
以 移动 庙 浏 览 需 优先， 扩展 到 蝎 面 问 浏 览 器 适 配 。 由 于 移动 端的 网 络 和 
计算 资源 相对 较 少 ， 所 以 一 般 比 较 推 荐 从 移动 端 扩展 到 昌 面 端的 方式 进 
行 适 配 ， 这 样 就 避免 了 在 移动 问 加 载 元 余 的 桌面 闫 CSS 样 式 内 容 。 而 屏 
幕 适 配 布局 则 是 主要 针对 移动 端的 ， 由 于 目前 移动 端 设备 屏幕 大 小 各 不 
相同 ， 屏 磊 适 配 布 局 是 为 了 实现 网 页 内 容 根据 移动 端 设备 屏 磋 大 小 等 比 
例 缩放 所 提出 的 一 种 布局 计算 方式 。 我 们 先 来 看 下 页 面 的 响应 式 布局 。 









































啊 应 式 布局 


啊 应 式 布 局 的 思路 比较 和 直接， 一般 是 通过 栅 格 系统 来 解决 百分比 方 
式 布局 。 例 如 我 们 希望 一 些 元 系 的 宽度 在 果 面 端 浏 览 器 上 按 一 定 比 例 布 
局 ， 而 在 移动 并 统一 占用 一 行 ， 那 么 残 可 以 采用 如 下 方式 。 








.Tow { 
width: 100%; 
+ 


,row .col-1 { 


width: 8.33333333333% 
} 


,row .COl-2 { 


width: 16.6666666667%; 


/* ，. ,比较 多 ， 此 处 省 略 */ 
,row ,COJL-12 { 


width: 100% 


/* 屏幕 宽度 小 于 414px 的 情况 */ 


@media only Screen and(max-width: 414px) { 





,row .col-1, .row .col-2, .row .col-3, .row .co0l-4, .row .col 


.COl1-7, .row .col-8, .row .col-9, .row .col-10, 


width: 100%; 


/* 坚 屏 的 情况 */ 


@media screen and (orientation: portrait)t{ 





/* 横 屏 的 情况 */ 


@media screen and (orientation: landscape)t{ 








,row .col-11 { 


栅 格 化 布局 通常 会 将 屏幕 宽度 等 分 成 多 个 固定 的 栅 格 〈 以 12 格 为 
例 ) ， 在 屏幕 宽度 大 于 414px 的 情况 下 ， 每 个 栅 格 的 元 素 使 用 宽度 为 按 
照 列 数 定义 父 元 素 的 百分比 宽度 ; 在 屏幕 宽度 小 于 414px 的 情况 下 ， 判 
全 入 玖 月 放生 磺 罗 人 宽度 较 罕 ， 所 有 的 栅 格 元 素 宽度 设置 为 
100%， 这 就 避免 了 移动 端 屏幕 上 容 髓 宽度 按 昕 分 比 计算 较 小 的 问题 。 
此 外 也 可 以 根据 移动 端 设备 横 屏 或 竖 屏 的 情况 添加 特殊 的 样式 规则 。 




















<div class="row col-1"></div> 
<div class="row col-2"></div> 
<div class="row col-4"></div> 
<div class="row col-8"></div> 


<div class="row col-12"></div> 


图 3-12 为 上 面 HTML 结 构 内 容 在 浏览 器 窗口 分 别 大 于 414px 和 小 于 
414px 的 情况 ， 这 样 实现 就 保证 了 移动 端 浏览 器 上 元 素 布局 的 自 适应 显 
示 ， 让 移动 端 内 容 的 布局 更 加 合理 清晰 。 


| .Col=l] 

和 = 
. CO1-4 . CO]1-4 
,8 


| No Fe | | ~ Gaol=12 | 





























屏幕 宽度 大 于 414 像 素 屏幕 分 辨 率 小 于 414 像 素 
图 3-12 ” 栅 格 化 布局 展示 效果 


屏幕 适 配 布局 








屏幕 适 配 布局 是 在 移动 端 解决 内 容 按照 不 同 屏幕 大 小 自动 等 比例 缩 
放 的 一 种 布局 计算 方式 。 屏 幕 适 配 布局 和 响应 式 布 局 是 不 同 的 ， 一 般 只 
在 移动 端 使 用 。 通 常 在 移动 端 页 面 上 ， 首 先 为 了 固定 浏览 器 对 HTML 文 
件 的 泻 染 ， 会 在 HIML 的 <head> 里 面 加 上 下 面 一 段 <meta> 声 明 来 控制 页 
面 使 用 移动 端 浏 览 器 展示 并 保持 内 容 不 缩放 。 

















<meta name="viewport" content="width=device-width,initial-scale=1 


user-scalable=no"/> 











这 里 通过 <meta> 控 制 页 面 的 不 缩放 和 我 们 屏幕 适 配 布局 根据 不 同 屏 
幕 大 小 自动 缩放 的 概念 是 不 同 的 。<meta> 中 viewport 控 制 的 缩放 是 在 屏 
幕 宽 度 确 定 后 浏览 堪 的 视窗 内 容 不 随 用 户 的 操作 而 缩放 ， 而 屏幕 适 配 布 
局 的 自动 缩放 是 在 屏幕 宽度 不 确定 的 情况 下 页 面 元 陛 展 示 内 容 与 宽屏 大 
小 保持 比例 不 变 。 不 然 ， 可 能 我 们 在 小 屏 移 动 设备 上 显示 正常 的 字体 在 
大 屏 手 机 上 显示 视觉 上 就 可 能 很 小 了 。 














以 320px 宽 度 的 移动 设备 屏幕 和 414px 宽 度 的 移动 设备 屏幕 比较 来 
看 ， 图 3-13 是 使 用 模拟 此 在 屏 帮 党 度 为 320px 的 浏览 占 和 屏 闫 党 度 为 
414px 的 浏览 器 中 打开 同一 个 页 面 的 情况 ， 页 面 中 宽度 为 160px 的 容 紫 在 
320px 宽 度 的 屏幕 下 面 占 总 宽度 的 50%， 而 在 414px 宽 度 的 屏幕 下 面 显然 
没有 占 到 50%， 而 且 不 同 屏幕 下 面 能 显示 同等 大 小 的 字体 个 数 也 是 不 相 
同 的 ， 屏 幕 宽度 为 414px 的 屏幕 下 面 一 行 可 以 显示 更 多 的 字数 ， 这 样 就 
导致 了 页 面 内 容 展示 在 不 同 移动 端 屏幕 上 不 一 致 。 对 于 这 类 屏 需 适 配 布 
局 问题 ， 我 们 通常 有 两 种 处 理 方法 ， 即 依据 HIML 中 <html> 标 釜 元 系 的 
zoom 属性 缩放 和 根据 REM 自 适 配 方案 实现 等 比例 缩放 。 
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宽度 160px 





宽度 为 414 像 素 的 移动 浏 
响 器 











图 3-13 不 同 大 小 屏幕 下 页 面 显 示 效 果 


1. zoom 属 性 控制 方案 








如 果 和 希望 在 320px 宽 度 屏 幕 上 显示 的 内 容 在 414px 的 宽度 屏幕 上 进行 
等 比例 自动 放大 ， 可 以 考虑 使 用 元 素 CSS 的 zoom 属性 来 尝试 解决 。 例 如 
我 们 可 以 设置 <html> 或 <body> 标 签 的 CSS 属 性 为 “zoom: 1.29375”， 其 中 
1.29375 = 414/320， 即 将 zoom 的 值 按照 屏幕 宽度 的 320 分 之 一 计算 ， 然 
后 赋 给 HTML 文 档 的 <html> 或 <body> 元 素 样式 就 可 以 了 。 这 种 情况 我 们 
使 用 414px 宽 度 的 移动 端 屏 幕 打开 同一 个 页 面 看 到 的 内 容 比 例 和 在 320px 





宽度 移动 端 浏览 器 打开 看 到 的 内 容 比例 是 一 致 的 。 使 用 JavaScript 就 可 以 
按 如 下 方式 来 设置 body 的 zoom 属性 。 





document ,body,Sstyle,zoom = Screen.width/320 


如 图 3-14 所 示 ， 通 过 实践 ， 加 上 "zoom: 1.29375" 属 性 后 ， 在 宽度 为 

414px 的 屏幕 上 的 内 容 显示 比例 和 宽度 为 320px 的 屏幕 上 保持 一 致 。 这 种 
方式 实现 很 简洁 ， 但 是 这 个 zoom 值 通常 需要 通过 JavaScript 计 算得 出 ， 
如 果 JavaScript 在 页 面 泻 染 之 后 完成 ， 则 会 出 现 页 面 内 容 全 部 重 排 的 情 
况 ， 所 以 我 们 需要 尽量 在 页 面 文档 开始 的 地 方 给 <html> 或 <body> 设 置 
zoom 属性 。 但 是 这 样 处 理 之 后 ， 其 他 屏幕 下 面 的 缩放 参考 尺寸 必须 全 
部 按照 这 个 固定 的 比例 来 缩放 ， 显 得 不 太 有 灵活。 
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宽度 160px 


图 3-14 ”使 用 zoom 属性 缩放 后 展示 效果 








2. REM 斌 幕 适 配方 案 


REM 方 案 目 前 应 用 广泛 。 我 们 知道 标签 元 素 的 CSS 大 小 尺寸 的 表示 
单位 主要 有 像素 px、 相 对 父 元 素 大 小 百分比 %、 相 对 于 当前 对 象 内 文本 
字体 font-size 的 大 小 em、 相 对 于 文档 根 元 素 font-size 的 大 小 rem (当然 还 
有 新 的 vh、vw、vmax、vmin， 此 处 先 不 做 讨论 ， 大 家 有 兴趣 可 以 去 了 
解 ， 其 实 是 解决 屏幕 适 配 更 好 的 备 选 方案 ， 但 是 目前 兼容 性 不 是 太 
人 














所 以 在 REM 方 案 中 ， 我 们 如 果 给 HTML 根 元 素 一 个 根据 屏幕 自动 调 











整 的 font-size， 页 面 上 所 有 元 素 的 尺寸 全 部 以 rem 为 单位 ， 无 论 屏 幕 宽 度 
怎样 变化 ， 页 面 的 内 容 和 屏幕 的 比例 将 始终 是 不 变 的 ， 这 样 就 可 以 实现 
页 面 内容 根 据 屏幕 来 自动 缩放 了 。 





这 里 定义 1rem 大 小 的 方案 有 很 多 ， 而 且 计 算得 到 的 1rem 对 应 的 像素 
宽度 结果 也 都 不 一 样 ， 例 如 有 人 这 样 来 计算 。 





lrem= 屏 幕 宽 度 大 屏幕 分 辨 率 /10 





上 述 方法 得 到 的 1rem 恰 好 是 屏幕 宽度 的 10%， 所 有 的 尺寸 布局 都 相 
当 于 完全 使 用 百分比 来 布局 ， 就 样 可 以 适应 几乎 所 有 的 屏幕 


或 者 我 们 通常 以 某 个 屏 旬 宽度 的 设计 稿 为 基准 (例如 320 像 素 宽 
度 ) 进行 缩放 。 
lrem= 屏 幕 宽度 /320*10 
这 样 1rem 在 宽度 为 320px 的 屏幕 上 表示 的 是 10pxX， 按 照 这 个 基准 ， 


Se 面 的 显示 比例 和 在 320px 宽 上 度 的 屏幕 上 显示 比例 将 
一 致 的 。 





在 上 面 的 例子 中 ， 如 果 <html> 标 签 元 素 的 font-size 为 10px， 此 时 将 
页 面 第 一 个 容器 块 的 宽度 设置 为 width: 16rem， 那 么 在 屏幕 宽度 为 414 px 
的 浏览 器 上 ，<html> 元 素 的 font-size 设 置 为 414/320*10px， 容 器 块 的 宽 
度 将 自动 填充 为 屏幕 宽度 的 一 半 。 同 样 ， 页 面 文字 的 设置 也 可 以 完全 使 
用 rem 为 单位 来 实现 屏幕 适 配 。 这 里 rem 通 党 也 是 通过 JavaScript 的 计算 
得 出 的 。 除 此 之 外 ， 我 们 也 可 以 像 下 面 这 样 通过 Media Query 直接 对 和 
见 的 几 种 屏幕 宽度 的 <html> 元 素 标 签 来 进行 设置 ， 避 人 免 使 用 JavaScript 来 
计算 。 











@mixin querywWidth( $min , $max ){ 
@if $min == -1{ 
@media screen and ( max-width: $max+px ) { 
htmlf{ 
font-size: ( ($max+1) / 320 ) * 10px; 


} 
} Qelse if $max == -1t{ 
@media screen and ( min-width: $min+px ) { 
htmlf{ 
font-size: ( $min / 320 ) * 10px; 


} 
} @elsef 
@media screen and ( min-width: $min+px ) and ( max-width: 
htmlf{ 


font-size: ( $min / 320 ) * 10px; 


} 

Q@include querywidth(-1,319); 
@include querywidth(320,359); 
@include querywidth(360,374); 
Q@include querywidth(375,383); 
Q@include querywidth(384,399); 
@include querywidth(400,413); 


Qinclude querywidth(414,-1); 





通过 SASS 语 法 的 计算 设 定 很 好 地 解决 了 不 同 大 小 屏幕 下 内 容 和 屏 
幕 比 例 不 同 的 问题 ， 其 实 怎样 来 计算 1rem 的 大 小 并 没有 最 佳 的 方案 ， 任 
何 一 种 方案 都 是 合理 的 ， 具 体 需要 根据 设计 稿 大 小 和 需求 来 确定 。 而 且 
需要 注意 的 是 ，REM 方 案 目 前 是 移动 端 上 很 成 熟 和 使 用 最 广泛 的 屏幕 适 
配方 案 ， 因 为 相对 于 zoom 属 性 的 设置 ， 更 加 灵活 可 控 ， 可 以 结合 不 需 
要 缠 放 的 px 单位 一 起 使 用 ， 所 以 建议 在 移动 剖 尺 量 部 用 REM 来 做 屏 疾 适 
配 布局 。 


3.7.4 行为 层 啊 应 式 


在 页 面 的 啊 应 式 设计 中 ， 行 为 层 脚本 也 是 需要 根据 浏览 器 环境 来 执 
行 不 同 逻 辑 的 。 在 3.7.2 市 中 我 们 也 提 到 了 一 些 ， 和 结构 层 类 似 ， 行 为 层 
的 啊 应 式 同 样 分 为 JavaScript 内 容 在 前 端 引 入 和 在 后 端 引 入 这 两 种 情况 。 
对 于 前 一 种 情况 ， 我 们 主要 可 以 通过 设备 浏览 器 环境 判断 来 异步 加 载 不 
同 的 JavaScript 脚 本 ， 这 里 不 做 过 多 讲解 。 











if(isMobile)t{ 
require.async(['zepto', './mobileMain'], function($, main)t 
main.init(); 
}); 
}elsef{ 
require.async(['jQuery', './main'], function($, main)t{ 
main.init(); 


}); 


当然 如 果 是 在 后 端 直 出 层 渔 染 不 同 脚本 内 容 就 更 简单 了 ， 通 过 设备 
浏览 器 的 判断 在 输出 模板 中 引入 不 同 的 脚本 资源 路 径 就 可 以 了 。 





{% if isMobile %} 

<script src="path/mobile/main.]js"></script> 
{% else %} 

<script src="path/pc/main.]js"></script> 


{% endif %} 


这 样 便 有 效 保证 了 加 面 问 浏 览 占 和 移动 端 浏览 右 只 加 载 目 己 需要 的 
脚本 资源 ， 执 行 对 应 的 逻辑 ， 同 时 避免 了 元 余 的 资源 文件 下 载 。 


3.8 ”本章 小 结 


这 一 章 中 ， 我 们 围绕 前 端的 三 层 结构 展开 介绍 了 JavaScript、HTML 
和 CSS 标 准 的 演进 与 主要 特性 的 变化 ， 以 及 它们 在 现代 开发 中 的 实际 应 
用 。 就 啊 应 式 网 站 的 设计 与 实现 ， 笔 者 结合 自己 的 实践 经 验 进 行 了 较 全 
面 的 原理 性 训 析 和 总 结 ， 介 绍 了 啊 应 式 网 站 实践 需要 考虑 到 的 问题 与 解 
决 方案 。 竺 握 这 些 将 有 利于 我 们 把 握 住 前 端 技 术 的 基础 和 应 用 方法 ， 这 
也 是 前 端 学 习 中 最 核心 的 部 分 。 下 一 章 中 ， 我 们 将 为 大 家 继续 讲解 前 端 
DOM 交 互 框架 设计 的 内 容 ， 主 要 以 前 端 框架 的 演进 为 主线 来 讲述 DOM 
交互 模式 的 变化 ， 同 时 向 大 家 讲解 DOM 交 互 方式 的 设计 原理 和 思路 。 





第 4 章 ”现代 前 中 交互 杠 架 


Web 前 端 页 面 的 开发 避免 不 了 与 DOM 的 交互 操作 。 自 前 端 技术 出 
现 后 ， 页 面 的 结构 越 来 越 复 杂 ， 用 户 的 操作 交互 越 来 越 多 ， 对 应 的 
DOM 交 互 也 越 来 越 频 系 。 为 了 提高 开 必 效率， 我们 常常 借助 DOM 区 互 
框架 来 简化 页 面 的 开发 工作 。 经 过 Web 前 端 这 些 年 的 发 展 ， 用 于 DOM 
交互 的 框架 越 来 越 多 ， 设 计 思 路 也 不 尽 相 同 。 总 结 来 说 ， 前 端 框 架 一 次 
次 变化 ， 从 提升 效率 的 阶段 ， 慢 慢 走向 改善 性 能 的 阶段 。 这 章 中 我 们 就 
一 起 来 看 看 那些 备 受 关注 的 前 端 框 架 ， 了 解 一 下 这 些 前 端 框 架 的 变化 究 
苋 给 我 们 带 来 了 什么 。 





4.1 直接 DOM 操 作 时 代 


前 端 HITML 结 构 是 浏览 器 中 承载 互联 网 内 容 数据 的 主要 载体 ， 用 户 
对 数据 的 处 理 和 展示 都 可 以 通过 HTML 来 体现 。 而 对 于 开发 者 来 说 ， 所 
有 数据 内 容 都 可 以 说 是 通过 DOM 结 构 来 组 织 和 展示 的 。 数 据 的 处 理 和 
操作 的 核心 其 实 就 是 DOM 的 处 理 和 操作 ， 即 便 是 今天 ， 所 有 前 端 
JavaScript 框 架 最 终 要 解决 的 仍然 是 如 何 实现 高 效 、 高 性 能 DOM 交 互 操 
作 的 问题 。 





我 们 先 回 到 Web 前 端的 起 始 阶段 ， 那 时 候 其 实 是 没有 页 面 DOM& 
互 的 ,一 般 就 是 一 个 静态 黄页 ， 即 把 一 个 静态 的 文本 放 到 一 个 连接 外 网 
的 服务 器 目录 下 ， 供 用 户 通过 浏览 喜来 连接 访问 。 用 户 除了 点 击 页 面 跳 
转 外 基本 不 能 有 任何 复杂 的 操作 ， 网 页 上 的 内 容 也 不 能 动态 更 新 ， 只 能 
通过 开发 者 修改 静态 文件 来 改变 。 早 期 的 网 站 页 面 作为 一 个 单纯 向 用 户 
传递 信息 和 共享 数据 的 方式 存在 。 











很 快 ， 使 用 数据 库 技术 便 可 以 将 数据 库 中 的 数据 记录 读 取 出 来 并 展 
示 给 用 户 ， 此 时 用 户 已 经 可 以 在 页 面 上 进行 一 些 简 单 的 操作 了 ， 例 如 表 
单 担 区 、 文 件 上 传 等 ， 这 一 阶段 我 们 可 以 称 为 Web 前 端的 早期 DOM 交 
互 时 代 。 在 该 阶段 ， 用 户 仍 以 日 同 订阅 、 获 取 和 接受 网 站 信息 内 容 为 
主 ， 可 以 进行 刷新 式 的 页 面 提交 等 操作 。 妆 然 今 天 来 看 这 些 技术 束 有 扣 
和 久远 了 ， 无 其 在 互联 网 如 此 高 速 发 展 的 前 提 下 就 显得 更 遥远 。 








本 书 一 开始 便 同 读者 介绍 了 前 端 技 术 出 现 的 背景 和 缘由 ， 从 根本 上 
来 说 也 可 以 认为 前 器 技 术 的 出 现 是 为 了 将 DOM 的 交互 操作 从 整个 web 
站 点 开发 中 独立 出 来 ， 进 而 进行 更 加 高 效 的 管理 。 随 着 





AJAX (Asyncnous JavaScript And XML， 异 步 JavaScript 和 XML ) 技术 
的 出 现 ， 前 端 页 面 上 的 用 户 操作 越 来 越 多 ， 越 来 越 复 杂 ， 以 前 的 很 多 用 
户 请 求 都 可 以 通过 AJAX 无 刷新 的 操作 来 完成 ， 通 常 AJAX 的 流程 为 用 户 
使 用 XMLHttpRequest (或 ActiveX) 创建 HITP 请 求 来 获取 服务 端的 数据 
或 一 段 HIML 结 构 内 容 ， 请 求 成 功 后 在 页 面 上 进行 增加 、 人 修改、 删除 
DOM 元 素 的 操作 。 


要 实现 对 DOM 元 素 的 交互 操作 ， 束 不 得 不 所 到 DOM API, DOM 
API 提 供 了 浏览 器 上 进行 DOM 对 象 树 交 互 操作 的 一 系列 原生 JavaScript 方 
法 ， 例 如 getElementById、createElement、createDocumentFragment、 
appendChild 等 。 包 括 HIML5 新 增加 的 DOM API 与 AJAX 的 API 在 内 ， 这 
些 API 可 以 分 成 以 下 几 种 类 型 : 市 点 查询 型 、 市 点 创建 型 、 市 点 修改 
型 、 节 点 关系 型 、 节 点 属性 型 和 内 容 加 载 型 。 





表 4-1 列 出 的 是 目前 浏览 器 常见 的 DOM API 方 法 。 使 用 这 些 基本 的 
API 我 们 就 可 以 进行 前 端 页 面 上 几乎 任何 DOM 的 得 询 和 网 络 请 求 操作 
了 ， 早 期 页 面相 对 比较 简单 ， 没 有 太 多 的 操作 内 容 ， 使 用 这 些 原 生 的 
API 就 可 以 满足 开发 需要 了 。 例 如 我 们 要 创建 一 个 数字 列表 ， 每 个 列表 
项 都 有 固定 id 和 data-id， 我 们 就 可 以 这 按照 如 下 代码 通过 基础 的 DOM 
API 实 现 。 





表 4-1 常见 DOM API 举 例 


| | 


节点 |getElementByld、getElementsByName、 
getElementsByClassName、 getElementsByTagName、 





querySelector、querySelectorAll 


局 createElement、createDocumentFragment、createTextNode、 





cloneNode 


有 appendChild、replaceChild、removeChild、insertBefore、 
”~ |innerHTML 


parentNode、previousSibling、childNodes 








点 
» linnerHTML、 attributes、 getAttribute、setAttribute、 
getComputedStyle 






加 载 |XMLHttpRequest、ActiveX 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 


<meta charset="utf-8" /> 





</head> 
<body> 
<div> 
<h2> 创 建 列表 </h2> 
<ul id="menu"></ul> 
</div> 
<script> 


let menuUl = document.getElementById('menu'); 
let fragment = document.createDocumentFragment(); 
for (let i = 0; i < 5; i++) { 

let 1i = document.createElement('1i"'); 


1i.innerHTML = 工 ; 


1i.id = 工 ; 
1i.setAttribute('data-id', i); 
fragment.appendchild(1i); 
} 
// 一 次 性 将 文档 碎片 内 容 插入 到 DOM 中 
menuUl.appendChild(fragment ) ; 








</script> 
</body> 
</html> 


需要 注意 的 是 ， 这 里 DOM 的 property 和 attribute 是 有 区 别 
的 。property 通 常 是 指 DOM 元 素 对 象 的 属性 ， 例 如 style; attribute 是 
指 HTML 标 签 的 文本 标记 属性 ， 一 般 是 可 见 的 ， 如 自 定义 的 data-id 属 
性 。 再 如 一 个 元 素 可 以 设置 style property 和 和 style attribute， 但 是 style 
property 是 DOM 元 素 回 有 的 ， 而 style attribute 则 不 一 定 有 ， 需 要 
在 HTML 结 构 中 设置 指定 。 推 荐 使 用 createDocumentFragment 来 代 蔡 
createElement 创 建 节点 内 容 ， 因 为 createDocumentFragment 可 以 将 多 个 
文档 内 容 瞩 段 先 缓存 起 来 ， 最 后 一 次 性 插入 到 DOM 中 ， 
而 createElement 每 次 创建 节点 都 需要 插入 到 DOM 中 ， 上 所 以 
createDocumentFragment 可 以 减少 DOM 操 作 次 数 ， 提 高 效率 。 











内 容 加 载 型 API 的 实现 方式 代码 如 下 。 


function urlGet(url) { 


let xmlHttp; 





// 创建 xmlHttp 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft .XMLHTTP" ) ; 
} 


// 发 送 xmlHttp 请 求 
xmlHttp.open("GET", ur]l); 





xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) 
alert('success' ) ; 
} else { 
alert('fail'); 


} 
xmlHttp.send(null); 


通过 使 用 这 些 API， 我 们 基本 可 以 完成 前 端 网 页 中 的 任何 操作 。 但 
随 着 网 站 应 用 的 复杂 化 ， 使 用 这 些 原生 的 API 开 发 就 显得 比较 低 效 而 且 
不 易 管 理 。 因 为 想 对 这 套 API 进 行 必 要 的 封装 来 提高 调用 效率 ， 所 以 
jQuery 这 个 典型 的 DOM 交 互 框架 就 应 运 而 生 了 ， 一 起 出 现 的 还 有 
Prototype 和 motools， 但 是 后 两 者 一 开始 就 实现 了 类 的 设计 模式 而 且 API 
的 使 用 不 太 方 便 ， 因 此 没有 被 广泛 使 用 。jQuery 以 其 简单 友好 的 API 和 
书写 方式 很 快 得 到 了 广大 开发 者 的 认可 和 使 用 。 











移动 nami 以 zepto 为 主 ， 可 以 认为 它 是 一 个 
简化 版 的 jQuery， 其 常用 的 API 和 jQuery 完全 相同 。 


那么 ， 我 们 再 来 看 一 下 jQuery 在 那个 时 代 甚 至 现在 到 底 帮 我 们 解决 
了 什么 问题 呢 ? 为 什么 能 够 受到 这 么 多 人 的 青睐 ? 大 概 一 想 ，jQuery 帮 
我 们 解决 的 问题 太 多 了 ， 添 加 了 丰富 的 API 方 法 的 封装 和 网 络 操作 ， 
些 都 是 浏览 器 本 身 没有 的 ， 极 大 地 提升 了 开发 效率 。 但 仔细 一 想 ， 
jQuery 处 理 的 问题 似乎 又 没有 那么 多 ，jQuery 只 是 帮 我 们 解决 了 使 用 基 
础 DOM API 进 行 前 端 开 发 遇 到 的 一 些 问题 。 再 回 到 DOM 原 生 API 的 几 种 
类 型 上 上 ， 可 以 发 现 jQuery 基本 帮 我 们 进行 了 上 上面 DOM 的 六 类 API 的 封装 
操作 ， 方 便 了 开发 者 对 这 几 类 API 进 行 调 用 。 











表 4-2 所 示 为 jQuery 部 分 常见 的 方法 API， 这 些 封 装 的 API 大 大 简化 
了 我 们 的 代码 开发 步骤 ， 提 高 了 开发 效率 。 原 来 使 用 基础 DOM API 开 发 
的 方式 就 可 以 变 成 jQuery 更 简单 的 方式 来 实现 了 。 


表 4-2 ”常见 jQuery API 举 例 


类 型 力作 
型 节 反 碍 询 $(selector)、find() 等 


型 廊 扩 创建 $(selector)、clone() 等 
点 修改 html ()、replace()、remove()、append()、before()、after() 等 


wo parent()、siblings()、dlosest()、next()、children() 等 


四 点 属性 |attr0、 data()、css()、hide()、show()、slideDown()、 | 


型 slideUp()、animate() 等 


Ho ajax()、get()、postO 等 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
</head> 
<body> 
<div> 


<h2> 创 建 列表 </h2> 





<ul id="menu"></ul> 
</div> 
<script src="./jQuery.jJs"></script> 
<script> 
let htmlArr = []; 
for (let i = 0; i < 5; i++) { 
htmlArr.push( <1i id="${i}" data-id="${i}">${i}</1i>. ); 
} 
$('#menu' ).append(htmlArr.join("")); 
</script> 
</body> 
</html> 


相对 来 说 ， 开 发 的 代码 简洁 了 很 多 ， 对 于 网 络 加 载 型 API 而 言 ， 也 
可 以 使 用 非 第 便捷 的 方式 实现 ， 读 者 可 以 和 基础 API 实 现 的 方式 进行 对 
be 


function urlGet(url) { 
$.ajax({ 
url: url, 
type: 'get', 
success(){ 
alert('success'); 
}, 
error()t{ 


alert('fail'); 


}); 





里 然 经 过 了 几 个 大 版 本 的 迭代 ， 目 前 jQuery 被 使 用 最 为 广泛 的 版 本 
仍然 是 1.x 版 本 。 目 前 为 止 jQuery 提供 的 API 已 经 很 完善 了 ，jQuery 1.x 版 
本 帮 我 们 解决 了 许多 问题 。 


o ”简化 选择 器 。 可 以 使 用 $(' 夫 d.class-a”)、findO 这 种 简短 的 形式 进 
行 组 合 碍 询 ， 帮 助 我 们 快速 找到 所 有 满足 条 件 的 DOM 元 素 ， 
并 自动 在 原型 链 上 为 返回 的 对 象 添加 第 用 的 操作 方法 。 相 比 之 
下 ， 原 生 的 方法 实现 组 合 查 询 就 比较 复杂 了 。 





o DOM 操 作 方 法 。 扩 展 实现 了 如 html()、append()、remove()、 
hide()、animateO 等 多 种 类 型 的 DOM 操 作 方法 ， 让 DOM 的 交互 
和 修改 更 加 简单 。 


o AJAX。 实 现 了 对 XMLHttpRequest 和 ActiveX 的 统一 封装 ， 使 
AJAX 网 络 请 求 的 调用 更 加 方便 。 


AJAX 跨 域 请 求 时 默认 不 会 带 有 浏览 器 端 Cookie 人 信息， 需要 在 请 
求 头 部 加 上 xhrFields: {withCredentials: true} 才 能 将 Cookie 信 息 正 常 带 
到 请 求 中 发 送 给 服务 器 。 


o 事件 绑 定 统一 处 理 。 除 了 DOM API 的 封装 ，jQuery 也 对 DOM 的 


部 分 功能 做 了 封装 ， 主 要 添加 了 on 等 方法 来 统一 处 理事 件 ， 包 
括 事件 绑 定 和 事件 代理 等 。 








作 


// BOM API 实现 事件 绑 








addEvent(element, type, fn) { 

















// 兼容 性 判断 
if (element.addEventListener) { 


element.addEventListener(type, fn, false); 
} else if (element.attachEvent) { 
// 通常 


TH 





IE 上 回调 函数 的 this 不 指向 当前 element， 所 以 绑 定 时 使 用 
// 绑 定 元 素 











element.attachEvent('on' + type, function() { 


fn.call(element); 


}); 
} else { 
element['on' + type] = fn; 
} 
// jQuery 事件 绑 定 








$(element).on(type, fn); 


0” 延 时 对 象 。 较 新 的 jQuery 版 本 添加 了 $.Deferred 对 象 来 处 理 异 步 
回调 髓 套 的 问题 。$.Deferred 的 实现 借鉴 了 异步 处 理 的 
Promise/A 规 范 ， 但 并 没有 完全 遵循 Promise/A 规 范 。 一 般 执 行 
resolve 时 ，$.Deferred 对 象 会 一 次 性 执行 done 中 全 部 的 方法 。 


let $defer = $.Deferred(); 


$defer.done(function() { 
console.1log('A'); 
}).done(function() { 
console.1log('B'); 
}).done(function() { 
console.1log('cC'); 
}).done(function() { 
console.1log('D'); 
}); 


$defer.resolve(); 





我 们 再 来 看 一 个 异步 的 例子 ， 理 解 一 下 $.Deferred 是 怎样 控制 多 个 
异步 函数 执行 的 。 


const fn1i = function() { 
// 声明 $defer 来 控制 执行 流程 ， 但 不 调用 $defer 时 将 不 会 继续 执行 返回 。 这 术 


// AJAX 等 方法 以 保证 请 求 的 有 序 性 了 
let $defer = $.Deferred(); 

















setTimeout(function() { 
console.1og('A'); 
$defer.resolve( ); 
}, 3000); 


return $defer; 


const fn2 = function() { 
let $defer = $.Deferred(); 
setTimeout(function() { 
console.1log('B'); 
$defer.resolve( ); 
}, 2000); 


return $defer; 


const fn3 = function() { 
let $defer = $.Deferred(); 
setTimeout(function() { 
console.1log('C'); 
$defer.resolve( ); 
}, 1000); 


return $defer; 


const fn4 = function() { 


setTimeout(function() { 


console,1og('D')， 


}, 90); 


fn1i().then(fn2).then(fn3).then(fn4); 


o 兼容 性 实现 。 例 如 jQuery 实现 on 事件 绑 定 和 Ajax 封装 时 充分 考 
虑 了 不 同 浏 贤 器 的 差异 性 ， 并 做 统一 处 理 ， 做 到 兼容 性 问题 对 
开发 者 的 透明 。 





总 结 而 言 ，jQuery 主 要 实现 了 选择 器 、DOM 操 作 方 法 、 事 件 绑 定 封 
闭 、AJAX、Deferred 这 五 个 方面 的 封装 和 向 见 的 兼容 性 问题 的 处 理 。 除 
此 之 外 ， 我 们 还 可 以 基于 jQuery 扩展 更 多 的 方法 功能 来 提高 业务 开发 效 
率 ， 例 如 Cookie 和 1localStorage 操 作 的 封装 、 上 传 文件 、 二 维 码 上 自动 生成 
等 都 可 以 基于 jQuery 的 大 框架 扩展 实现 。 


如 果 你 因为 项 目的 历史 原因 还 在 使 用 jQuery， 那 么 我 想 要 给 些 建 
议 。 想 要 高 效 地 使 用 jQuery， 可 以 参考 以 下 的 优化 建议 和 原则 : 
(1) 尽 可 能 使 用 id 选 择 器 进行 DOM 查 询 操 作 ， 不 要 使 用 组 合 选 择 
器 : (2) 缓存 一 切 需 要 复 用 的 jQuery DOM 对 象 ， 使 用 find() 子 查询 ; 
(3) 不 要 滥用 jQuery， 尽 量 使 用 原生 的 代码 代替 ; (4)〉 尽 可 能 使 
用 jQuery 的 静态 方法 ; (5) 使 用 事件 代理 ， 不 要 直接 使 用 元 素 的 事 
件 绑 定 ， (6) 尽量 使 用 较 新 的 jQuery 版 本 (7) 尽 可 能 使 用 链 式 写 
法 来 提高 编程 效率 和 代码 运行 效率 。 





为 什么 要 提 到 上 述 几 点 ， 是 因为 很 多 人 仍然 不 注意 jQuery 的 高 效 
编程 原则 ， 容 易 犯 常见 错误 ， 包 括 一 些 国 内 一 线 企 业 里 面 工作 时 间 很 


长 的 开发 者 仍 在 犯 这 些 错误 ， 这 样 做 虽然 不 会 影 啊 业 务 的 功能 开 肥 ， 
但 是 做 完 并 做 好 一 件 事情 应 该 成 为 我 们 的 另 一 个 目标 。 和 希望 你 身上 没 
出 现 过 这 些 问 题 。 





图 4-1 是 目前 前 端 主流 DOM 交 互 式 页 面 加 载 的 基本 流程 ， 浏 览 器 开 
始 加 载 页 面 HIML， 页 面 HTML 加 载 完 成 后 请 求 页 面 脚 本 加 载 ， 脚 本 加 





载 完成 再 执行 数据 请 求 ， 最 后 进行 数据 这 染 DOM 操 作 和 事件 绑 定 。 


JavaScript 等 
脚本 加 载 





图 4-1 主流 前 端 页 面 加 载 模式 








随 着 AJAX 技 术 的 盛行 ，SPA (Single Page Application， 单 页 面 应 
用 ) 应 用 开始 被 广泛 认可 。SPA 的 思路 是 将 整个 应 用 的 内 容 都 在 一 个 页 
面 中 实现 并 完全 通过 异步 交互 来 根据 用 户 操作 加 载 不 同 的 内 容 。 这 样 ， 
使 用 jQuery 直接 进行 DOM 交 互 的 开发 方式 就 显得 不 易 管理 。 例 如 当 SPA 
页 面 上 的 交互 和 异步 加 载 的 内 容 很 多 时 ， 按 照 之 前 的 思路 ， 我 们 需要 在 
每 一 次 数据 请 求 后 进行 数据 泻 染 和 事件 绑 定 ， 用 户 操 作 后 进行 男 一 部 分 
内 容 的 请 求 和 事件 绑 定 ， 后 面 以 此 类 推 。 当 所 有 异步 页 面 全 部 调用 完 
成 ， 页 面 上 的 绑 定 将 变 得 十 分 混乱 ， 各 种 元 素 绑 定 ， 泻 染 后 的 视图 内 容 
也 不 清晰 ， 同 时 需要 声明 不 同 变量 保存 每 次 异步 加 载 时 返回 的 数据 对 
象 ， 因 为 页 面 交 互 需要 保留 这 些 数据 进行 操作 ， 最 终 的 项 目 代 人 码 可 能 会 
乱 成 一 锅 络 。 



































在 这 种 情况 下 ， 我 们 就 很 需要 一 个 能 目 动 管理 页 面 上 这 些 DOM 交 
互 操 作 的 机 制 ， 这 时 或 许 就 可 以 考虑 一 下 使 用 MVx 的 交互 模式 了 。 


4.2 MV#* 交 互 模式 


4.2.1 前端 MVC 模 式 





上 节 中 我 们 讲 到 ， 通 过 DOM 交 互 框架 已 经 可 以 比较 高 效 地 处 理 
DOM 操 作 和 事件 绑 定 等 0 这 种 高 效 的 方式 带 来 了 效率 上 的 提 
升 ， 但 随 着 页 面 结构 和 交互 复 杂 性 的 提升 ， 仅 靠 这 种 方式 会 增加 维护 管 
理 的 难度 。 随 着 AJAX 技 术 的 盛行 ，SPA 应 用 开始 被 广泛 使 用 。 上 一 节 
最 后 也 提 到 ， 用 这 种 直接 的 方式 进行 SPA 的 开发 和 维护 是 比较 奔 烦 的 。 
为 了 解决 这 个 问题 ， 通 常 将 页 面 上 与 DOM 相 关 的 内 容 抽 象 成 数据 模 
型 、 视 图 、 事 件 控制 函数 三 部 分 ， 这 了 台 有 了 前 端 MVC (Model-View- 
Controller) 的 设计 思路 。 


MVC 可 以 认为 是 一 种 开发 设计 模式 ， 。 思路 是 将 DOM 交 互 的 
内 容 分 为 数据 模型 、 视 图 和 事件 控制 函数 三 个 部 分 ， 并 对 它们 进行 统一 
管理 。Model 用 来 存放 请 求 的 数据 en View 用 于 页 面 DOM 
的 更 新 与 修改 ，Controller 则 用 于 根据 前 端 路 由 条 件 〈 例 如 不 同 的 HASH 
路 由 ) 来 调用 不 同 Model 给 View 演 染 不 同 的 数据 内 容 。 第 用 页 面 路 由 的 
实现 也 很 简单 ， 代 码 如 下 ， 其 主要 思路 是 让 URL 地 址 内 容 匹 配对 应 的 字 
符 串 然后 进行 相应 的 操作 。 





const router = { 
get(match, fn)t{ 
let Url = location.href, 


routeReg = new RegExp(match, 'g'); 


if(routeReg.test(url))t{ 
fn(); 
} 


return this,; 


router.get('#index', function()t{ 

_loadIndex(); // 注册 hash 含有 #index 的 路 由 执行 对 应 的 操作 
}).get('#detail', function()t{ 

_loadDetail(); // 注册 hash 含有 #detail 的 路 由 执行 对 应 的 操作 
}); 
































另外 我 们 也 可 以 使 用 HTML5 的 pushState 来 实现 路 由 。 
history.pushState (state，title，url) 方法 可 以 改变 当前 页 面 的 rl 而 不 发 生 
跳 转 ， 并 将 不 同 的 state 数 据 和 对 应 的 url 对 应 起 来 。 如 果 页 面 显示 的 内 容 
是 根据 不 同 的 数据 状态 来 自动 完成 的 ， 这 样 根据 state 的 内 容 来 加 载 不 同 
的 组 件 就 很 有 用 了 了。 











history,pushState({tpage: 'A'}, 'page A', 'a.html'); 
console.log(history.state); // {page: 'A'} 对 象 


history,pushState({tpage: 'B'}, 'page B', 'b.html'); 
console.log(history.state); // {page: 'B'} 对 象 


history.pushState({page: 'C'}, 'page C', 'c.html'); 
console.log(history.state); // {page: 'C'} 对 象 


这 里 访问 不 同 的 URL 地 址 a.html、b.html、c.html， 页 面 并 不 会 发 生 
跳 转 刷 新 ， 而 是 改变 了 当前 的 history.state 内 容 ， 我 们 使 用 history.state 数 
据 的 改变 来 动态 改变 页 面 DOM 的 内 容 这 种 方式 来 实现 SPA 就 很 方便 了 。 











使 用 路 由 后 ， 如 果 将 SPA 中 的 每 个 路 由 或 用 户 操作 加 载 的 页 面 内 容 
都 看 成 是 一 个 组 件 ， 那 么 之 前 的 做 法 是 每 个 组 件 独立 完成 各 自 的 数据 请 
求 操 作 、 演 染 和 数据 绑 定 ， 一 旦 组 件 多 了 ， 每 个 组 件 自行 处 理 就 会 造成 
逻辑 混乱 。 到 了 MVC 里 面 ， 所 有 的 组 件数 据 请 求 、 泻 染 、 页 面 迎 辑 操 
作 都 分 别 使 用 Model、View、Controller 来 注册 调用 。 通 俗 地 讲 ， 就 像 是 
组 件 交 出 了 自己 的 控制 权 给 统一 的 控制 对 象 来 调用 一 样 。 


如 图 4-2 所 示 ， 前 端 应 用 页 面 加 载 完 成 后 ， 根 据 不 同 的 用 户 操作 ， 
页 面 会 执行 不 同 的 啊 应 。 例 如 用 户 操作 或 URL 哈 名 改变 时 会 去 调用 与 之 
对 应 的 ControllerA 方 法 ，ControllerA 方 法 会 请 求 获取 对 应 的 数据 
ModelA，ModelA 很 可 能 是 前 端 AJAX 请 求 返 回 的 一 个 接口 数据 ， 然 后 
将 ModelA 传 递 给 视图 模板 ViewA 并 将 最 终 内 容 泻 染 到 浏览 器 中 ， 这 样 
就 完成 了 用 户 的 一 次 交互 操作 ， 用 户 下 一 次 操作 的 过 程 也 是 一 样 的 。 同 
时 如 果 用 户 的 操作 需要 进行 DOM 结 构 修改 ， 那 么 会 传 入 到 Controller 
中 ， 通 过 Controller 获 取 数 据 并 控制 View 的 更 新 。 对 其 中 的 一 个 组 件 A 的 
实现 操作 代码 如 下 。 


<div id="A" onclick="Controller.A.event.change"></div> 
let Controller = {}, Model = {}, View= {}; 
View['A'] = function(data)t{ 


let tpl = '<input id="input" type="text" value="{{text} 
{{text}}</span>'; 


// 调用 模板 演 染 数据 获取 HTML 片段 
let html = render(tpl, data); 
document .getElementById('A').innerHTML = html; 
}; 


Model['A'] = { 
text: 'ViewA 演 染 完成 ' 


}; 


Controller['A'] = function(){ 


View['A'|(model['A' |); 


// 用 户 操作 一 般 通 过 改变 Hash 完成 ， 并 触发 Controller 来 改变 Model 和 
$('window').on('hashchange', function()t 

model['A'].text = location.hash,; 

View['A'] (model['A']); 
}); 





// 点 击 事件 可 以 直接 触发 Controller 改变 Model 并 重新 演 染 View 
self.event['change'|] = function(){ 
model['A'].text = ' 新 的 ViewA 演 染 完成 '， 
View['A'](model['A' |]); 
}; 


| ee | 
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图 4-2 MVC 模 式 组 件 结构 示意 图 

















为 了 方便 大 家 理解 ， 这 里 采用 了 一 个 最 直接 的 实现 方式 ， 而 且 没 有 
对 A、B、C 组 件 进行 单独 管理 ， 而 是 将 它 的 调用 内 容 分 成 Controller、 
Model、View 并 放 在 一 起 统一 管理 ， 相 互 之 间 的 调用 是 直接 进行 的 。 成 
熟 的 MVC 框 架 一 般 是 通过 事件 监听 或 观察 者 模式 来 实现 的 ， 这 里 只 是 
为 了 让 读者 们 更 好 地 理解 MVC 的 原理 。 当 然 这 样 的 组 件 如 果 多 了 也 比 
较 混乱 。 所 以 通过 改进 可 以 将 页 面 分 成 不 同 的 小 模块 来 处 理 ， 同 时 考虑 
到 代码 复 用 性 ， 因 此 可 以 使 用 继承 的 方式 来 定义 这 三 个 组 件 ， 继 续 以 A 
组 件 为 例 ， 我 们 一 般 看 到 的 主流 MVC 框 架 的 组 件 定义 代码 如 下 。 





<div id="A" onclick="A.event.change"></div> 











// 可 能 有 一 个 公用 的 Component 基 类 


let component = new Component(); 


let A = component.extend({ 
$el: document.getElementById('A'), 
model: { 


text: 'ViewA 演 染 完成 ' 


}, 


view(data)t 
let tpl = '<input id="input" type="text" value="{{text}}" 


id="showText">{{text}}</span>'; 


// 调用 模板 渲染 数据 获取 HTML 片段 
let htm]l = render(tpl, data); 


this.S$el.innerHTML = html; 
}, 


controller (){ 


let self = this; 


// 调用 model 数据 传 入 view 中 泻 染 内 容 


self.view(self.model); 


// 用 户 操 作 一 般 通 过 Hash 来 触发 Controller 改变 Model 和 View 
$('window').on('hashchange', function()t 
self.model.text = location.hash; 


self.view(self.model); 


}); 





// 点 击 事件 可 以 直接 触发 Model 改变 并 重新 演 染 View 
self.event['change'] = function()t{ 


self.model.text = ' 新 的 ViewA 泻 染 完成 '， 


self.view(self.model); 


}); 


尽管 这 里 写法 不 太一 样 ， 但 实现 的 功能 和 上 面 一 段 代 人 码 是 相同 的 。 
当 Model 或 View 复 杂 后 ， 我 们 也 可 以 考虑 将 Model、View、Controller 拆 
分 成 不 同文 件 导 入 引用 。 这 段 代 人 码 就 是 MVC 基 础 原型 的 设计 和 实现 ， 
需要 注意 的 是 ， 用 户 操 作 引 起 的 DOM 修 改 操 作 主 要 是 通过 Controller 来 
直接 控制 的 ， 但 是 Controller 只 进行 修改 操作 指令 的 分 发 ， 数 据 的 泻 染 一 
般 是 在 View 层 来 完成 。 





4.2.2 ”前 端 MVP 模 式 


MVP (Model-View-Presenter〉 可 以 跟 MVC 对 照 起 来 看 。 和 MVC 一 
样 ，M 就 是 Model，V 就 是 View， 而 P 代 表 Presenter， 它 与 Controller 有 点 
相似 ， 但 不 同 的 是 ， 用 户 在 进行 DOM 修 改 操作 时 将 通过 View 上 的 行为 
触 友 ， 然 后 将 修改 通知 给 Presenter 来 完成 后 面 的 Model 修 改 和 其 他 View 
的 更 新 ， 而 MVC 模 式 下 ， 用 户 的 操作 是 直接 通过 Controller 来 控制 的 。 
Presenter 和 View 的 操作 绑 定 通常 是 双 回 的 ，View 的 改变 一 般 会 触发 
Presenter 的 动作 ，Presenter 的 动作 也 会 改变 View。 





图 4-3 为 MVP 的 执行 流程 ，Model 和 View 是 不 直接 发 生 关 系 的 ， 所 
有 的 逻辑 调用 数据 Model 和 泻 染 视图 View 模 板 都 在 Presenter 里 面 完 成 ， 
同时 用 户 在 View 层 操作 的 改变 会 反馈 到 Presenter 然 后 改变 Model 并 泻 染 
新 的 View。 因 此 ， 上 一 段 代码 通过 MVP 模 式 的 实现 如 下 。 
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图 4-3 ”MVP 模式 组 件 结构 示意 图 











<div id="A" onclick="A.event.change"></div> 
// 可 能 有 一 个 公用 的 Component 基 类 


let _ component = new Component ( ) ; 








let A = component .extend ({ 
$el: document.getElementById('A'), 
model: { 
text: 'ViewA 演 染 完成 ' 


}, 


view: '<input id="input" type="text" value="{{text}}"><span 


id="showText">{{text}}</span>', 


presenter(){ 


let self = this; 


// 调用 模板 演 染 数据 获取 HTML 片段 
let html = render(self.view, self.model); 


self.$el.innerHTML = htmil; 


// View 上 的 改变 将 通知 Presenter 改变 Model 和 其 他 的 View 
$('#input').on('change', function(){ 
self.model.text = this.value; 
html = render('{{text}}', self.model); 
$('#showText').html(html); 
}); 














// Controller 上 的 操作 处 理 和 MVC 的 方式 类 似 


self.event['change'] = function(){ 








self.model.text = ' 新 的 ViewA 演 染 完成 '， 
html = render('{{text}}', self.model); 


$('#showText').html(html); 


}); 


可 以 看 出 ， 这 时 View 和 Model 主 要 用 于 提供 视图 模板 和 数据 而 不 做 
任何 逻辑 处 理 ， 这 是 有 好 处 的 ， 因 为 我 们 现在 只 要 关注 Presenter 上 面 的 
逻辑 操作 就 可 以 了 ， 它 的 职员 很 清晰 ，Presenter 作 为 中 间 部 分 连接 
Model 和 View 的 通信 交互 完成 所 有 的 逻辑 操作 ， 但 这 样 Presenter 层 的 内 
容 就 可 能 变 得 很 重 了 。 男 外 用 户 在 View 上 的 操作 会 有 反馈 到 Presenter 中 进 
行 Model 修 改 ， 并 更 新 其 他 对 应 部 分 的 View 内 容 。 





4.2.3 “前端 MVVM 模 式 


MVVM 则 可 以 认为 是 一 个 自动 化 的 MVP 框 架 ， 并 且 使 用 ViewModel 
代 蔡 了 Presenter， 即 数据 Model 的 调用 和 模板 内 容 的 演 染 不 需要 我 们 主 
动 操 作 ， 而 是 ViewModel 自 动 来 触发 完成 ， 任 何 用 户 的 操作 也 都 是 通过 
ViewModel 的 改变 来 驱动 的 。 

如 图 4-4 所 示 ， 用 户 进 行 操作 时 ，ViewModel 会 捕获 数据 变化 ， 直 接 
将 变化 反映 到 View 层 上 。ViewModel 的 数据 操作 最 终 在 页 面 上 以 
Directive 的 形式 体现 ， 通 过 对 Directive 的 识别 来 泻 染 数据 或 绑 定 事件 ， 
管理 起 来 更 清晰 。 那 么 什么 是 Directive 呢 ? 
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图 4-4 MVP 模 式 组 件 结构 示意 图 
































MVVM 设 计 的 一 个 很 大 的 好 处 是 将 MVP 中 Presenter 的 工作 拆 分 成 多 
个 小 的 指令 步 又， 然后 绑 定 到 相对 应 的 元 素 中 ， 根 据 相 对 应 的 数据 变化 


来 驱动 触发 ， 上 自动 管理 交互 操作 ， 同 时 也 免 去 了 查看 Presenter 中 事件 列 
表 的 工作 ， 而 且 一 般 ViewModel 初 始 化 时 会 自动 进行 数据 绑 定 ， 并 将 页 














面 中 所 有 的 同类 操作 复 用 ， 大 大 节省 了 我 们 目 己 进行 内 容 泻 染 和 事件 绑 
定 的 代码 量 。 用 MVVM 模 式 实现 上 面 的 例子 代码 如 下 。 


<div id="A" q-on="click: change"> 
<input type="text" q-value="text"><span q-html="text"></span> 


</div> 


let viewModel] = new VM({ 
$el: document.getElementById('A'), 
data:t{ 


text: 'ViewA 演 染 完成 ' 


}, 
method:{ 
change( ){ 
this.text = ' 新 的 ViewA 泻 染 完成 ' 
} 
} 
}); 


整体 上 简洁 了 和 很多， 模板 数 据 的 泻 染 和 数据 绑 定 可 以 通过 q-html 或 
q-dick 等 特殊 的 属性 来 控制 完成 ， 这 些 特殊 的 元 素 标 签 属 性 就 是 我 们 所 
说 的 Directive， 当 然 不 同 的 MVVM 框 架 使 用 的 Directive 前 绥 不 一 样 ， 但 
作用 是 类 似 的 。 我 们 再 来 看 一 个 更 复杂 的 例子 。 





<form action="#" id="form"> 
<label for="text" q-html="label"></label> 
<input type="text" q-value="value" q-model="value" q-mydo="nu 


<button q-on="click: submit"></button> 


</form> 


let viewModel = new VM({ 
$el: document .getElementById('form'), 
data:t{ 
label: ' 用 户 名 '， 
value: ' 输 入 初始 值 '， 


number: 0 
}, 
method:{ 
submit(){ 
// doSubmit 
} 
}, 


directive:{ 
mydo(value)t 


console.1log(value); 


} 
}, 
filter:{ 
getValue( ){ 
return ++ Value ， 
} 
} 


}); 





在 这 段 代 码 中 ，ViewModel 初 始 化 时 目 动 进行 了 数据 填充 、 数 据 双 
器 绑 定 和 事件 绑 定 。 我 们 再 来 看 一 下 执行 new VM 0 时 进行 ViewModel 
初始 化 所 完成 的 事情 。 


如 图 4-5 所 示 ， 首 先 JavaScript 会 找到 
document.getElementById 〈'form') 这 个 元 系 并 开始 扫描 元 素 节 点 ， 对 这 
个 元 素 的 属性 节点 attributes 和 所 有 子 节点 中 的 attributes 进 行 过 历 ， 一 旦 
裔 历 到 名 称 中 含有 g- 开 头 的 属性 时 ， 束 认为 是 MVVM 框 架 自 定义 的 
Directive， 此 时 会 执行 相对 应 的 操作 。 例 如 过 历 到 q-html="label" 时 ， 怠 
将 ViewModel 初 始 化 时 默认 数据 对 象 data 中 的 label 值 赋 给 这 个 元 素 的 
innerHTML; 人 授 历 到 gq-on="click: submit" 时 ， 就 在 这 个 元 素 上 绑 定 click 
事件 ， 事 件 函 数 名 为 submit; 也 可 以 自 定 义 q-mydo 的 指令 ， 允 历 到 该 节 
点 属性 时 ， 调 用 Directive 中 的 mydo 方 法 ， 输 入 参数 为 data 中 getValue 方 
法 的 返回 值 ， 这 里 getValue 0 将 输入 的 number 值 自动 加 1 并 返回 ， 
getValue 函 数 则 一 般 被 称 为 过 滤器 。 用 户 在 View 层 操作 时 会 自动 改变 
ViewModel 的 数据 ， 然 后 ViewModel 会 检测 数据 变化 ， 重 新 壳 历 扫描 节 
点 属性 ， 执 行 对 应 的 Directive， 泻 染 HTML 视 图 或 做 事件 绑 定 。 
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图 4-5 MVVM 人 初始 化 解析 过 程 





这 里 要 知道 的 是 ，d- 开 头 的 标签 属性 被 称 为 指令 ， 这 是 框架 约定 
的 ， 不 同 的 框架 约定 的 通常 不 一 样 ， 例 如 ng-、v-、ms-， 相 信 大 家 也 见 
过 甚至 用 过 。 这 里 ViewModel 创 建 并 进行 视图 演 染 和 事件 绑 定 的 过 程 非 
第 简单 ， 按 照 这 个 思路 去 扩充， 我 们 就 可 以 自己 实现 一 个 简单 的 
MVVM 框 如 了 。 当 然 完 整 的 框架 涉及 的 东西 远 比 这 要 多 ， 如 含有 丰富 
的 directive、filter、 表 达 式 、ViewModel 中 完善 的 API， 甚 至 包含 一 些 浏 
贤 占 兼容 性 处 理 等 。 








directive、filter 具 体 是 什么 呢 ? 我 们 结合 MVVM 框 架设 计 的 相关 内 
容 来 具体 了 解 一 


Directive。 翻 译 为 指令 ， 简 单 地 说 就 是 自 定 义 的 执行 函数 ， 例 
如 q-html、q-class、q-on、q-show、d-attr 等 封装 了 DOM 的 一 些 
基本 可 复 用 性 的 操作 函数 API。 


Filter。 也 叫 过 滤器 ， 如 bool、upperCase、lowerCase 等 ， 指 用 户 
希望 对 传 入 的 初始 数据 进行 处 理 ， 然后 再 将 这 个 处 理 的 吉 果 交 
给 Directive 或 下 一 个 Filter。 例 如 ，ViewModel 初 始 化 时 传 入 的 
是 一 个 时 间 惟 ， 而 我 们 希望 在 页 面 上 显示 格式 化 后 的 时 间 ， 那 

么 就 可 以 用 q-html='"time | formartTime" 这 样 的 方式 来 使 用 ， 其 
中 formatTime 则 是 将 时 间 枚 time 转 化 为 时 间 格 式 的 Filter 函 数 。 


表达 式 设计 。 如 if...else 等 ， 类 似 前 端 普通 的 页 面 模 板 表 达 式 ， 
其 作用 也 是 控制 页 面 内 容 按照 具体 条 件 来 显示 。 


ViewModel 设 计 。 是 实现 传 入 的 Model 数 据 在 内 存 中 存放 的 环 
节 ， 通 常 ViewModel 也 会 提供 一 些 基本 的 操作 API， 方 便 开发 
者 对 数据 进行 读 取 或 修改 。 





数据 变更 检测 。 我 们 上 面 讲 到 了 MVVM 通 常 是 通过 数据 改变 来 
驱动 的 ， 这 样 束 需要 进行 数据 的 双 同 绑 定 。 一 般 奇 要 根据 View 
层 的 变化 来 改变 Model， 是 通过 一 些 特殊 元 素 〈 例 如 <input>、 
<select>、<textarea> 等 元 素 ) 的 onchange 事 件 来 触发 修改 
JavaScript 中 ViewModel 对 象 数据 的 内 容 来 实现 的 ， 这 点 比较 容 
易 理 解 。 另 一 方面 是 ViewModel 修 改 ， 如 何 触发 View 的 自动 更 
新 或 重演 染 呢 。 这 种 根据 数据 的 变化 来 自动 触发 其 他 操作 的 机 
制 就 是 我 们 说 的 数据 变更 检测 ， 实 现 数据 变更 检测 的 方法 主要 
有 手动 触发 绑 定 、 脏 数据 检测 、 对 象 劫持 、Proxy 等 。 下 面 就 
来 具体 讲解 ViewModel 数 据 变 更 检测 的 实现 方案 。 











4.2.4 数据 变更 检测 示例 


之 所 以 将 数据 变更 检测 单独 作为 一 节 来 讲解 是 因为 其 实现 方式 较 
多 ， 而 且 数据 变更 检测 除了 MVVM 框 架设 计 的 场景 ， 前 端 很 多 其 他 地 
方 也 都 可 以 用 到 。JavaScript 发 展 到 ECMAScript 6+， 形 成 了 更 多 的 方式 
来 实现 数据 对 象 的 变更 检测 ， 下 面 以 目前 四 种 可 行 的 方法 为 例 一 一 为 大 


家 介绍 。 





手动 触发 绑 定 





手动 触发 指令 绑 定 是 比较 直接 的 实现 方式 ， 主 要 思路 是 通过 在 数据 
对 象 上 定义 getO0 方 法 和 set(0 方 法 〈 当 然 也 可 以 使 用 其 他 命名 方法 ) ， 调 
用 时 手动 触发 get0 或 set0 函 数 来 获取 、 修 改 数据 ， 改 变数 据 后 会 主动 触 
发 gst0 和 setO 函 数 中 View 层 的 重新 泻 染 功能 。 前 面 提 到 了 ， 根 据 视 图 
View 来 驱动 ViewModel 变 化 的 场景 主要 应 用 于 <input>、<select>、 
<textarea> 等 元 素 中 ， 当 用 户 输入 内 容 变化 时 ， 通 过 监听 DOM 的 
change、select、keyup 等 事件 来 触发 操作 改变 ViewModel 的 数据 。 我 们 
来 看 一 个 简单 的 数据 双 同 绑 定 的 例子 。 














<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>data-binding-method-set</title> 
</head> 


<body> 


<input q-value="value" type="text" id="input"> 

<Span q-text="value" id="el"></span> 

<script> 
let elems = [document.getElementById('el'), document .getEleme 
let data = { 


value: 'hello' 


}; 


// 定义 Directive 





let directive = { 
text: function(text){ 
this.innerHTML = text， 
}, 
value: function(value)t 


this.setAttribute('value', value); 


}; 


// 数据 绑 定 监听 


if(document.addEventListener)t{ 





elems[1].addEventListener('keyup', function(e) { 
ViewModelSet('value', e.target.value); 
}, false); 
}elsef 
elems[1].attachEvent('onkeyup', function(e) { 
ViewModelSet('value', e.target.value); 


}, false); 





// 开始 扫描 节点 
Scan( ) ， 
// 设置 页 面 2 秒 后 自动 改变 数据 更 新 视图 


setTimeout(function(){ 




















ViewModelSet('value', 'hello ouvenzhang'); 


}, 1000) 


function scan() { 
// 扫 撞 带 指令 的 节点 属性 


for(let elem of elems){ 























elem.directive = [1]; 
for(let attr of elem.attributes) { 
if (attr.nodeName.indexOof('q-') >= 0) { 
// 调用 属性 指令 


directive[attr.nodeName.slice(2)].call(elenm, 





elem.directive.push(attr.nodeName.slice(2)); 








// 设置 数据 改变 后 扫描 节点 


function ViewModelSet(key, value)t{ 














data[key] = value; 


scan(); 


} 
</script> 
</body> 


<html> 


通过 浏览 器 加 载 执 行 这 个 页 面 结构 ，ViewModel 的 变化 会 自动 改变 
输入 框 的 内 容 ， 同 样 ， 输 入 内 容 的 变化 也 会 驱动 ViewModel 数 据 的 变 
化 。 我 们 通过 ViewModelSet() 方 法 改变 ViewModel 的 数据 后 ， 需 要 主动 
调用 scan 0 方法 重新 扫描 HTML 页 面 上 的 节点 ， 并 在 需要 的 地 方 重 新 演 
染 HTML 结 构 。 





脏 检 测 机 制 


以 典型 的 MVVM 框 架 Angularjs 为 例 ，Angularjs 是 通过 检查 脏 数 据 来 
进行 View 层 操作 更 新 的 ， 但 我 们 并 不 针对 某 个 框架 来 分 析 脏 数据 检测 的 
机 制 ， 因 为 成 熟 框架 的 实现 考虑 了 很 多 全 面 的 东西 ， 比 较 复杂 ， 我 们 需 
要 的 是 通过 简洁 明了 的 代码 演示 脏 数 据 检 测 的 实现 原理 。 脏 检测 的 基本 
原理 是 在 ViewModel 对 象 的 某 个 属性 值 发 生变 化 时 找到 与 这 个 属性 值 相 
关 的 所 有 元 素 ， 然 后 再 比较 数据 变化 ， 如 果 变 化 则 进行 Directive 指 令 调 
用 ， 对 这 个 元 素 进 行 重新 扫 摘 渲染 。 用 这 种 方法 实现 上 面 的 例子 ， 代 码 
如 下 。 





<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title>data-binding-drity-check</title> 


</head> 
<body> 
<input qg-event="value" qg-bind="value" type="text" id="input 
<Span qg-event="text" qg-bind="value" id="el"></span> 
<script> 
let elems = [document.getElementById('el'), document.getEleme 
let data = { 
value: 'hello' 
}; 


// 定义 Directive 





let directive = { 
text: function(str) { 
this.innerHTML = str; 
}, 
value: function(str) { 


this.setAttribute('value', str); 


}; 





// 初始 化 扫描 节点 


Scan(eJlems ) ; 

















$digest(' value ' ) 


< 
* 输入 框 数 据 绑 定 监听 
*/ 





if(document.addEventListener){ 


elems[1].addEventListener('keyup', function(e) { 
data.value = e.target.value; 
$digest(e.target.getAttribute('qg-bind'"')); 

}, false); 

}elsef{ 

elems[1].attachEvent('onkeyup', function(e) { 
data.value = e.target.value; 
$digest(e,target .getAttribute( 'dqg-bind ' )); 

}, false); 


setTimeout(function() { 
data.value = 'hello ouvenzhang'; 
// 执行 $digest 方法 来 启动 脏 检测 
$digest('value' ); 








}, 2000) 


function scan(elems) { 
// 扫描 佛 指 令 的 节点 属性 
for(let elem of elems){ 























elem.directive = [1]; 

















// 可 以 理解 为 数据 劫持 监听 


function $digest(value){ 








let list = document.querySelectorAll('[qg-bind='+ Value + 


digest(1ist); 


// 脏 数 据 循 环 检测 
function digest(elems) { 
// 扫 撞 带 指令 的 节点 属性 


for (let i = 0, len = elems.length; i < len; i++) { 


























let elem = elems[i]; 
for (let j = 0, leni = elem.attributes.length; j < le 
let attr = elem.attributes[j]; 
if (attr.nodeName.indexOof('qg-event') >= 0) { 
// 调用 属性 指令 
let datakey = elem.getAttribute( 'qg-bind') || 
// 进行 脏 数据 检测 ， 如 果 数 据 改变 ， 则 重新 执行 指令 ， 和 否则 


If(elem.directive[attr.nodevalue] !== data[da 








directive[attr.nodeValuel].call(elem, data 


elem.directive[lattr.nodeValue|] = data[dat 


} 
} 
} 
} 
} 
</script> 
</body> 
</html> 








其 实 这 里 的 和 手动 绑 定 扫描 市 点 的 方式 类 似 ， 不 同 的 是 ， 脏 检测 只 





针对 可 能 修改 的 元 素 进行 扫描 ， 这 样 束 提高 了 ViewModel 内 容 变化 后 扫 
摘 视 图 演 染 的 效率 。 


前 端 数据 对 象 劫 持 (Hijacking) 


数据 支持 是 目前 使 用 比较 广泛 的 方式 。 其 基本 思路 是 使 用 
Object.defineProperty 和 Object.defineProperies 对 ViewModel 数 据 对 象 进行 
属性 get0 和 setO 的 监听 ， 当 有 数据 读 取 和 赋值 操作 时 则 扫描 元 素 节 点 ， 
运行 指定 对 应 节点 的 Directive 指 令 ， 这 样 ViewModel 使 用 通用 的 等 号 赋 
值 就 可 以 了 。 具 体例 子 如 下 。 


<1DOCTYPE html> 

<htm] lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>data-binding-hijacking</title> 

</head> 

<body> 
<input q-value="value" type="text" id="input"> 
<div dq-text="value" id="el"></div> 
<script> 

let elems = [document.getElementById('el'), document .getElement 
let data = { 
value: 'hello' 

}; 


// 定义 Directive 





let directive = { 


text: function(text) { 


this.innerHTML = text; 


}, 


value: function(value) { 


this.setAttribute('value', value); 


}; 


let bValue; 


scan(); 

















// 可 以 理解 为 数据 劫持 监听 
defineGetAndSet(data, 'value'); 








// 数据 绑 定 监听 


if(document.addEventListener){ 





elems[1].addEventListener('keyup', function(e) { 
data.value = e.target.value; 
}, false); 
}elsef{ 
elems[1].attachEvent('onkeyup', function(e) { 
data.value = e.target.value; 


}, false); 


setTimeout(function() { 


data.value = 'hello ouvenzhang'; 


}, 2000); 


function scan() { 
// 扫描 佛 指 令 的 节点 属性 
for(let elem of elems){ 























elem.directive = [1]; 
for(let attr of elem.attributes) { 
if (attr.nodeName.indexOof('q-') >= 0) { 
// 调用 属性 指令 


directive[attr.nodeName.slice(2)].call(elenm, 





elem.directive.push(attr.nodeName.slice(2)); 








// 定义 对 象 属 性 设置 劫持 
function defineGetAndSet(obj, propName) { 
Object.definePproperty(ob]j, propName, { 
get: function() { 
return bvalue; 
}, 
set: function(newValue) { 
bValue = newValue; 
scan(); 
}, 
enumerable: true, 


configurable: true 


}); 
} 
</script> 
</body> 
</html> 


要 注意 的 是 ，defineProperty 只 支持 Internet ”Explorer ”8 以 上 和 
Chrome 等 标准 的 浏览 器 ， 且 Internet Explorer 8 浏览 器 中 需要 使 用 es5- 
shim 来 提供 支持 。Firefox 浏 览 器 不 文 持 该 方法 ， 需 要 使 用 
_ defineGetter 和” defineSetter 来 代 蔡 ， 这 里 为 了 让 大 家 理解 其 中 的 
原理 ， 所 以 直接 使 用 了 defineProperty 来 实现 。 


ECMAScript 6 Proxy 


在 前 面 章节 中 ， 我 们 讲解 ECMAScript ”6 时 向 大 家 介绍 了 Proxy 特 
性 ， 它 可 以 用 于 在 已 有 的 对 象 基 础 上 重新 定义 一 个 对 象 ， 并 重新 定义 对 
象 原型 上 的 方法 ， 包 括 get() 方 法 和 set() 方 法 ， 同 时 我 们 也 将 它 和 
defineProperty 进 行 了 比较 。 下 面 来 看 一 下 使 用 Proxy 如 何 进行 数据 的 变 
更 检测 。 





<1DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>data-binding-proxy</title> 


</head> 


<body> 
<input q-value="value" type="text" id="input"> 
<div q-text="value" id="el"></div> 


<script> 


"USe strict'; 
let elems = [document.getElementById('el'), document .getEleme 


// 定义 Directive 





let directive = { 

text: function(text) { 
this.innerHTML = text; 

}, 

value: function(value) { 


this.setAttribute('value', value); 


}; 


// 设置 data 的 访问 Proxy 
let data = new Proxy({}, { 
get: function (target, key, receiver) { 
return target.value; 
}, 
set: function (target, key, value, receiver) { 
target.value = value; 
scan(); 


return target.value; 


}); 


data['value'] = 'hello'; 
Scan( ) ， 
/** 

* 数据 绑 定 监听 

*/ 





if(document.addEventListener){ 
elems[1].addEventListener('keyup', function(e) { 
data.value = e.target.value; 
}, false); 
}elsef{ 
elems[1]l].attachEvent('keyup', function(e) { 
data.value = e.target.value; 


}, false); 


setTimeout(function() { 
data.value = 'hello ouvenzhang'; 


}, 2000); 


function scan() { 
// 扫 撞 带 指令 的 节点 属性 
for(let elem of elems){ 























elem.directive = [1]; 
for(let attr of elem.attributes) { 


if (attr.nodeName.indexOof('q-') >= 0) { 


// 调用 属性 指令 


directive[attr.nodeName.slice(2)].call(elenm, 





elem.directive.push(attr.nodeName.slice(2)); 


} 
} 
} 
} 
</script> 
</body> 
</html> 


这 里 通过 简单 的 代码 体现 了 MVVM 双 向 数据 绑 定 的 基本 原理 ， 和 希 
望 读者 们 认真 阅读 并 理解 。 关 于 MVVM 的 数据 变更 检测 介绍 的 比较 
多 ， 因 为 可 以 认为 这 是 MVVM 设 计 实 现 的 最 关键 部 分 ， 如 果 处 理 得 好 
会 大 大 提升 MVVM 框 以 的 效率 ， 人 否则 会 有 较 多 重复 的 元 系 扫 描 过 程 而 
拖累 代码 执行 速度 。 到 这 里 相信 大 家 也 对 MVVM 的 设计 原理 有 了 较 深 
的 了 解 ， 自 己 也 可 以 实现 一 个 类 似 的 框 染 。 








总 结 来 看 ， 前 端 框架 从 直接 DOM 操 作 到 MVC 设 计 模 式 ， 然 后 到 
MVP， 再 到 MVVM 框 架 ， 前 问 设 计 模 式 的 改进 原则 一 直 癌 着 高 效 、 易 
实现 、 易 维护 、 易 扩展 的 基本 方向 发 展 。 虽 然 目 前 前 端 各 类 框架 也 已 经 
成 熟 并 开始 向 高 版 本 迭代 ， 但 是 还 没有 结束 ， 我 们 现在 的 编程 对 象 依然 
没有 脱离 DOM 编 程 的 基本 套路 ， 一 次 次 框架 的 改进 大 大 提高 了 开发 效 
率 ， 但 是 DOM 元 素 运行 的 效率 仍然 没有 变 。 要 解决 这 个 问题 ， 就 必须 
了 解 下 一 节 中 介绍 的 前 端 Virtual DOM。 











4.3 ”Virtual DOM 交 互 模式 


4.3.1 _ Virtual DOM 设 计 理 念 








MVVM 的 前 端 交 互 模式 大 大 提高 了 编程 效率 ， 自 动 双 向 数据 绑 定 
让 我 们 可 以 将 页 面 逻 辑 实现 的 核心 转移 到 数据 层 的 修改 操作 上 ， 而 不 再 
是 在 页 面 中 直接 操作 DOM。 但 实际 上 ， 通 过 上 一 节 的 内 容 可 以 看 出 ， 
尽管 MVVM 改 变 了 前 端 开 发 的 逻辑 方式 ， 但 是 最 终 数 据 层 反 应 到 页 面 
上 View 层 的 泻 染 和 改变 仍 是 通过 对 应 的 指令 进行 DOM 操 作 来 完成 的 ， 
而 且 通 常 一 次 ViewModel 的 变化 可 能 会 触发 页 面 上 多 个 指令 操作 DOM 的 
变化 ， 带 来 大 量 的 页 面 结 构 层 DOM 操 作 或 泻 染 。 先 来 看 下 面 这 个 应 用 
场景 。 














<ul id="root"> 
<1li dq-repeat="1list"> 
<Span q-text="value"></span> 


<span> 固 定 文本 </span> 





</1i> 
</U]> 
let viewModel = new VM({ 
$el: document.getElementById('root'), 
data:t{ 
list: [{value: 1}, {value: 2}, {value: 3}|] 


}); 


使 用 MVVM 框 架 时 就 生成 了 一 个 数字 列表 ， 此 时 如 果 需 要 显示 的 
内 容 变 成 了 [{fvalue: 0}, {value: 1}, {value: 2}, {value: 3 和 ， 在 MVVM 框 架 
中 一 般 会 重新 泻 染 整 个 列表 ， 包 括 列表 中 无 须 改 变 的 部 分 也 会 重新 泻 染 
一 次 。 但 实际 上 如 果 直 接 操 作 改 变 DOM 的 话 ， 只 需要 在 <ul> 子 元 素 前 
插入 一 个 新 的 <li> 元 素 就 可 以 了 。 但 在 一 般 的 MVVM 框 架 中 ， 我 们 通常 
不 会 这 样 做 。 坚 无 疑问 ， 这 种 情况 下 MVVM 的 View 层 更 新 模式 就 消耗 
了 更 多 没 必 要 的 性 能 。 








那么 该 如 何 对 ViewModel 进 行 改 进 ， 让 浏览 器 知道 实际 上 只 是 增加 
了 一 个 元 素 昵 ? 通过 对 比 [{value: 1}，{fvalue: 2}，{fvalue: 3 名 和 [{value: 
0} ，{value: 1} ，{value: 2}，{value:3} 站 ， 我 们 发 现 其 实 只 是 增加 了 一 个 
{value: 0}， 那 么 该 怎样 将 这 个 增加 的 数据 反映 到 View 层 上 呢 ? 我 们 可 
以 这 样 想 ， 将 新 的 Model ”data 和 旧 的 Model data 进 行 对 比 ， 然 后 记录 
ViewModel 的 改变 方式 和 人 位置， 就 知道 了 这 次 View 层 应 该 怎样 去 更 新 ， 
这 样 比 直接 重新 演 染 整个 列表 高 效 得 多 。 





这 里 其 实 可 以 理解 为 ，ViewModel 里 的 数据 就 是 描述 页 面 View 内 容 
的 另 一 种 数据 结构 标识 ， 不 过 需要 结合 特定 的 MVVM 描 述 语 法 编译 来 
生成 完整 的 DOM 结 构 。 试 想 一 下 ， 如 果 ViewModel 里 的 数据 和 MVVM 
的 语法 结构 放 在 一 起 用 另 一 种 对 象 表示 ， 代 码 可 能 如 下 。 





let ulElement = { 
tagName: 'ul', 
attributes: [{ 

id; 'root' 


}], 


children: |[ 

{tagName: '1i', children: [t{ 
tagName: "Span '， 
nodeText: 1 

},4 
tagName: "Span '， 
nodeText: ' 固 定 文本 ' 

}]}, 

{tagName: '1i', children: [t{ 





tagName: 'span', 
nodeText: 2 
},4 
tagName: "Span '， 
nodeText: ' 固 定 文本 ' 
}]}, 
{tagName: '1i', children: [t{ 





tagName: 'span', 
nodeText: 3 

},4 
tagName: "Span '， 


nodeText : ' 同 定 文本 ' 





}]} 


如 图 4-6， 如 果 用 JavaScript 对 象 的 属性 层级 结构 来 描述 上 面 HTML 
DOM 对 象 树 的 结构 ， 就 可 以 这 样 来 表示 。 当 数据 改变 时 ， 新 生成 一 份 


改变 后 的 ulElement， 并 与 原来 的 ulElemnet 结 构 进 行 对 比 ， 可 以 看 出 ， 
上 面 的 操作 只 需要 在 ulElement 对 象 children 属 性 的 最 前 面 增加 以 下 内 容 
即 可 。 


{tagName: '1i', children: [{ 
tagName: 'span', 
nodeText: 0 


},1 


tagName: 'span', 


nodeText: ' 同 定 文本 ' 





}]} 
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节点 变化 对 比 








这 样 我 们 就 找到 了 进行 这 次 视图 改变 的 最 小 操作 描述 的 对 象 ， 根 据 
这 个 差异 性 描述 的 对 象 ， 可 以 很 容易 地 创建 出 变更 的 DOM 结 构 ， 完 成 
这 次 HTML DOM 结 构 的 修改 ， 而 不 是 直接 对 整个 列表 重新 演 染 。 这 样 
我 们 也 不 用 再 去 读 取 MVVM 的 语法 结构 了 ， 人 否则 仍 需 扫 描 DOM 节 点 的 
所 有 属性 ， 进 行 较 多 的 DOM 操 作 ， 而 浏览 右 中 DOM 对 象 的 默认 属性 是 
很 多 的 ， 这 样 ViewModel 初 始 化 泻 染 的 过 程 便 会 很 慢 。 





这 里 的 ulElement 对 象 可 以 理解 为 Virtual DOM。 通 常 认 为 ，Virtual 
DOM 是 一 个 能 够 直接 描述 一 段 HTML DOM 结 构 的 JavaScript 对 象 ， 浏 览 
器 可 以 根据 它 的 结构 按照 一 定 规则 创建 出 确定 唯一 的 HTML ”DOM 结 
构 。 整 体 来 看 ，Virtual DOM 的 交互 模式 减少 了 MVVM 或 其 他 框架 中 对 
DOM 的 扫描 或 操作 次 数 ， 并 且 在 数据 发 生 改 变 后 只 在 合适 的 地 方 根据 
JavaScript 对 象 来 进行 最 小 化 的 页 面 DOM 操 作 ， 避 人 免 大 量 重新 泻 染 。 


4.3.2 Virtual DOM 的 核心 实现 


先 总 结 一 下 使 用 Virtual ”DOM 模 式 来 控制 页 面 DOM 结 构 更 新 的 过 
程 : 创建 原始 页 面 或 组 件 的 Virtual ” DOM 结构 ， 用 户 操 作 后 需要 进行 
DOM 更 新 时 ， 生 成 用 户 操作 后 页 面 或 组 件 的 Virtual DOM 结 构 并 与 之 前 
的 结构 进行 对 比 ， 找 到 最 小 变化 Virtual DOM 的 差异 化 描述 对 象 ， 最 后 
把 差异 化 的 Virtual DOM 根 据 特定 的 规则 演 染 到 页 面 上 。 所 以 核心 操作 
可 以 抽象 成 三 个 步骤 ;创建 Virtual DOM; 对 比 两 个 Virtual DOM 生 成 差 
异化 Virtual DOM; 将 差异 化 Virtual DOM 泻 染 到 页 面 上 上。 下面 逐一 了 解 
这 三 个 步骤 的 具体 操作 。 


创建 Virtual DOM 


创建 Virtual DOM 即 把 一 段 HIML 字 符 串 文本 解析 成 一 个 能 够 描述 
它 的 JavaScript 对 象 。 我 们 很 自然 地 想 ， 通 过 浏览 器 提供 的 DOM API 扫 
接 这 段 DOM 的 节点 ， 裔 历 它 的 属性 ， 然 后 添加 到 JavaScript 对 象 上 去 即 
T's 


<ul] id="root"> 


<1i> 
<span>1</span> 


<span> 固 定 文本 </span> 





</1i> 
<]i> 


<span>2</span> 





<span> 固 定 文本 </span> 
</1i> 
<1i> 

<span>3</span> 


<span> 固 定 文本 </span> 





</1i> 


</ul> 


例如 上 面 这 段 HTML 片 段 ， 遍 历 完成 后 生成 如 下 结构 。 


let ulElement = { 
tagName: ‘'ul', 
attribute: [{ 
id: 'root' 
}], 
children: [ 
{tagName: '1i', children: [t{ 
tagName: "Span '， 
nodeText: 1 


},1 


tagName: "Span '， 


nodeText : 


}]}, 
{tagName: '1i 
tagName: 
nodeText : 
},4 
tagName: 
nodeText : 
}]}, 
{tagName: 
tagName: 
nodeText : 
},4 
tagName: 


nodeText: 


}]} 


这 似乎 很 合理 ， 但 其 实 这 样 是 错 的 。 这 样 创建 Virtual 


失去 Virtual DOM 的 优势 ， 它 是 为 了 避免 直接 进行 DOM 操 作 而 设计 的 。 


ETT 


' 固 定 文本 ' 





', children: 


'span', 


2 


'span', 


' 固定 文本 ' 





'span', 


3 


'span', 


' 固定 文本 ' 





; Children: 


[t 


[t 


DOM 会 直接 


我 们 不 能 通过 浏览 器 DOM ， API 扫描 去 生成 JavaScript 对 象 ， 因 为 扫描 过 


程 本 身 使 用 到 DOM 的 读 取 操 作 ， 这 个 过 程 很 慢 





。 一 种 可 选 的 方式 是 ， 


直接 书写 类 似 ulElement 的 JavaScript 结 构 表 示 Virtual DOM， 但 这 样 又 会 
导致 层次 不 清晰 ， 当 节点 过 多 时 ，JavaScript 对 象 就 会 很 大 ， 难 以 阅读 和 
开发 管理 。 相 比 之 下 我 们 仍然 习惯 使 用 HIML 标 记 来 书写 最 终 浏 览 器 页 


面 的 结构 ， 所 以 一 种 更 可 选 的 方法 是 ， 





自己 实现 上 述 这 段 HTML 字 符 串 


文本 的 解析 方式 ， 根 据 标签 之 间 的 关系 ， 读 取 生 成 Virtual DOM 的 结 
构 。 例 如 提供 某 个 常见 Virtual DOM 的 方法 createVDOML。 


let htmlSstring = ‘<ul id="root" class="1list"> 
<1i> 
<span>1</span> 


<span> 固 定 文本 </span> 





</1i> 
<1i> 
<span>2</span> 


<span> 固 定 文本 </span> 





</1i> 
<1i> 
<span>3</span> 


<span> 固 定 文本 </span> 





</1i> 


</Ul>;. 


let ulEmement = createVDOM(htmlString); 


那么 createVDOM 就 可 以 如 下 实现 : 逐个 分 析 字 符 串 中 的 字符 ， 根 
据 词法 分 析 内 容 ， 将 标签 名 字 存 为 tagName， 属 性 存 入 attributes， 子 标 
签 内 容 存 入 children。 通 过 这 种 方式 ， 我 们 可 以 将 一 段 HIML 文 本 字符 串 
解析 成 一 个 JavaScript 对 象 。 到 目前 为 止 ， 浏 览 器 对 HTML 还 没有 任何 处 
理 ， 而 是 JavaScript 直 接 分 析 HTML 字 符 串 文本 来 生成 Virtual DOM， 所 
以 这 就 比 DOM API 操 作 要 快 。 创 建 Virtual DOM 往 往 就 是 将 一 段 DOM 描 
述 字 符 串 解析 成 Virtual DOM 对 象 的 过 程 ， 供 后 面 操作 调用 。 


图 4-7 为 浏览 器 进行 词法 分 析 的 状态 转换 图 。 根 据 HIML 字 符 串 解析 
创建 Virutal DOM 的 过 程 相 当 于 实现 了 一 个 HTML 文 本 解析 右 ， 但 是 没 
有 生成 DOM 对 象 树 ， 只 是 生成 了 一 个 操作 效率 更 高 的 JavaScript 对 象 ， 
因此 通常 不 会 直接 将 HTML 交 给 浏览 器 去 解析 ， 因 为 浏览 器 的 DOM 解 析 
(BV OMS TR OP DOM RO BS 
成 之 后 再 通过 Virtual DOM 进 行 泻 染 生 成 一 个 真实 的 DOM 操 作 就 比较 简 
:ee 










before attribute value 


attribute value 、 
attribute name 


before attribute name 


raCe] 


Self-closing 


data 
tag Name 


end tag open 
markup declaration open 


图 4-7 文法 解析 过 程 HTML 


const render = function (virtualDOM) { 


let element = document.createElement(virtualDOM.tagName); 


let attributes = virtualDOM.attributes; 





// 设置 节点 的 DOM 属性 
for (let key in attributes) { 


element.setAttribute(key, attributes[key]) 


let children = virtualDOM.children || [] 


for(let child of children)t{ 
// 如 果 是 字符 串 则 直接 插入 字符 串 ， 否 则 构建 子 节点 
let childNode = (typeof child === 'string') ? document.cr 
render (child) 

















element.appendchild(childNode) 


return element,; 


对 比 Virtual DOM 








当 用 户 进 行 了 页 面 操作 需要 进行 页 面 视图 改变 时 ， 通 常会 生成 一 个 
新 的 Virtual DOM 结 构 来 表示 改变 后 的 状态 ， 而 且 不 会 将 这 个 改变 后 的 
Virtual DOM 内 容 立 即 重 新 泻 染 到 页 面 中 ， 而 是 通过 对 比 找 出 两 个 
Virtual DOM 的 差异 性 ， 得 到 一 个 差异 树 对 象 。 对 于 Virtual DOM 的 对 比 














算法 实际 上 是 对 于 多 又 树 结构 的 遍历 算法 。 对 多 又 树 遍 历 就 有 广度 优先 
算法 和 深度 优先 算法 ， 我 们 以 深度 优先 算法 为 例 来 看 一 下 Virtual DOM 
树 的 对 比 过 程 。 


如 图 4-8 所 示 ， 可 以 对 Virtual DOM 中 的 每 个 节点 添加 一 个 唯一 的 字 
母 d， 那 么 两 个 Virtual DOM 的 节点 顺序 分 别 使 用 深度 优先 遍历 算法 表示 
为 ABEFCGHDJJ 和 AKLMBEFCGHDIJ， 这 样 我 们 很 容易 分 析出 需要 在 A 
和 B 之 间 进 行 插 入 操作 KLM 节 点 ， 再 根据 KLM 的 关系 ， 可 以 知道 只 需要 
插入 完整 的 K 节 点 即 可 。 使 用 广度 优先 算法 过 历 的 思路 也 是 类 似 的 ， 允 
历 出 两 个 Virtual DOM 节 点 顺序 为 ABCDEFGHIJ 和 AKBCDLMEFGHIJ， 
不 过 稍微 不 同 的 是 ， 这 种 情况 下 检测 到 有 两 处 插入 ， 需 要 进一步 判断 来 
合并 操作 ， 优 化 差异 树 的 结构 。 


此 外 在 Virtual DOM 的 对 比 过 程 中 ， 除 了 节点 改变 的 内 容 ， 还 需要 
继续 记录 发 生 差 异化 改变 的 类 型 和 位 置 ， 例 如 是 针对 有 具体 哪 一 个 元 素 的 
增加 、 替 换 、 删 除 操 作 等 。 


多 ~) 


1 /IR /NR 
哆 A 0 多 


图 4-8 深度 优先 算法 对 比 Virtual DOM 








演 染 差异 化 Virtual DOM 


经 过 Virtual DOM 的 差异 化 对 比 ， 我 们 获取 了 用 户 操 作 后 的 差异 化 


Virtual DOM、 兰 异化 类 型 和 兰 异 化 的 位 置 ， 那 么 剩 下 的 操作 惑 很 直接 
了 ， 根 据 对 比 返回 的 结果 将 差异 化 内 容 经 过 DOM 操 作 泻 染 到 页 面 上 ， 
整个 交互 的 过 程 便 完成 了 。 


与 以 前 交互 模式 相 比 ，Virtual ”DOM 最 本 质 的 区 别 在 于 减少 了 对 
DOM 对 象 的 操作 ， 通 过 JavaScript 对 象 来 代替 DOM 对 象 树 ， 并 且 在 页 面 
结构 改变 时 进行 最 小 代价 的 DOM 演 染 操 作 ， 提 高 了 交互 的 性 能 和 效 
率 。 这 就 是 Virtual DOM 交 互 模 式 的 优势 ， 也 是 提高 前 端 交 互 性 能 的 根 








参考 资料 : http://w3c.github.io/html/syntax.html。 


通过 Virtual DOM 的 实现 分 析 ， 我 们 大 概 了 解 了 它 的 实现 过 程 和 主 
要 优势 。 这 种 直接 解析 和 操作 JavaScript 对 象 的 方式 相对 于 频繁 的 DOM 
操作 速度 更 快 ， 可 以 认为 Virtual DOM 的 设计 是 为 了 提升 页 面 的 泻 染 性 
能 ， 为 前 端 构建 高 性 能 的 Web 应 用 提供 了 新 的 实践 方案 ， 在 实践 项 目 中 
非常 值得 尝试 和 推广 。 但 实际 上 ， 我 们 只 是 通过 这 种 方式 减少 了 DOM 
操作 ， 而 没有 完全 脱离 DOM 操 作 。 在 最 后 的 泻 染 阶段 ，DOM 的 泻 染 操 
作 仍 然 无 法 避免 ， 在 浏览 器 DOM 性 能 更 慢 的 移动 端 Hybrid WebView 
中 ， 如 果 想 完全 脱离 对 DOM 的 操作 来 进一步 提高 性 能 ， 叉 该 怎么 做 
呢 ? 

















» 


4.4 ”前 端 MNV* 时 代 


尽管 Virtual DOM 的 交互 模式 能 在 页 面 数据 泻 染 和 变更 时 尽 可 能 地 
减少 DOM 操 作 ， 但 仍 无 法 完全 脱离 DOM 交 互 的 模式 。 我 们 知道 DOM 的 
操作 效率 不 高 ， 在 移动 设备 的 Hybrid WebView 上 表现 会 更 慢 ， 所 以 为 了 
进一步 改进 Hybrid 应 用 中 的 DOM 性 能 ， 和 希望 完全 脱离 DOM 编 程 的 模式 
来 进行 结构 层 的 操作 。 





为 什么 可 以 这 样 来 实现 呢 ? 首先 ， 目 前 主流 Hybrid App 的 Web 内 容 
通常 是 在 原生 应 用 中 舱 入 WebView 来 实现 的 ， 而 原生 应 用 的 界面 数据 泻 
染 可 以 通过 调用 原生 控件 来 实现 ， 它 不 仅 没有 HIML ”DOM 的 性 能 缺 
陷 ， 而 且 还 可 以 直接 调用 Native 系 统 底层 的 API; 其 次 ， 我 们 在 第 2 章 中 
讲 到 ，Hybrid App 可 以 通过 统一 的 JavaScript 交 互 协议 来 调用 原生 的 方法 
和 控件 。 所 以 使 用 JavaScript 直 接 调用 和 产生 原生 控件 进行 界面 数据 演 染 
的 方式 是 可 以 实现 的 。 








4.4.1 MNV* 模 式 简 介 


我 们 把 这 种 使 用 JavaScript 调 用 原生 控件 或 事件 绑 定 来 生成 应 用 程序 
的 交互 模式 称 为 前 端 MNV 关 开发 模式 。 可 以 简单 理解 为 Model- 
NativeView- 夫 ， 而 后 面 的 大 可 以 表示 Virtual DOM 或 MVVM 中 的 
ViewModel， 我 们 也 可 以 自己 使 用 Controller 来 实现 调用 的 方式 。 这 样 定 
义 是 非常 合适 的 ， 相 比 之 前 的 不 同 无 非 就 是 使 用 NativeView 代 蔡 了 


View。 








如 果 说 Virtual DOM 减 少 了 DOM 的 交互 次 数 ， 那 么 MNVX 想 要 做 的 
- 件 事 情 就 是 完全 抛弃 使 用 DOM， 而 交互 数据 的 操作 依然 可 以 使 用 
ViewModel、Virtual DOM 或 者 直接 的 Model 来 实现 ， 有 具体 就 看 实现 的 方 
式 了 。 值 得 注意 的 是 ， 这 种 模式 目前 仅 适 用 于 移动 端 Hybrid 应 用 ， 因 为 
需要 依赖 原生 应 用 控件 的 调用 文 持 ， 而 只 有 这 种 特殊 的 应 用 场景 才 满 足 


条 件 。 














4.4.2 MNV* 模 式 实 现 原 理 


我 们 直接 来 看 一 下 MNV 大 模式 的 通用 实现 思路 。 显 示 一 段 文 本 内 
容 代 码 如 下 。 


<TextView q-text="text"></TextView> 


对 应 的 数据 Model 为 {text: hello' }， 解 析 到 Native 端 生成 一 个 文本 
域 的 过 程 束 可 以 这 样 来 描述 。 


如 图 4-9 所 示 ， 以 ViewModel 封 装 实现 生成 NativeView 的 思路 为 例 ， 
我 们 需要 通过 NativeView 来 演 数 一 段 广 本， 需要 注意 的 是 ， 此 时 开发 的 
前 端 结构 层 规范 就 不 是 HTML 了 ， 而 是 XML 规范 ， 两 者 解析 过 程 大 致 类 
似 。 首 先 ，MNV 大 框架 需要 解析 数据 ViewModel 和 XML 的 指令 
Directive， 我 们 知道 JavaScript 可 以 借助 通用 协议 来 调用 原生 应 用 的 方 
法 ， 然 后 按照 标准 的 JSBridge 协 议 将 Model 和 Directive 封 装 成 协议 串 
jsbridge:/DOMRender:success/ createView?{"text": "hello", "element : 
"TextView"} 的 形式 ， 通 过 Prompt (Android 上 的 方法 ，iOS 上 使 用 
iframe) 发 送 到 客户 端 ， 这 里 调用 的 是 解析 DOMRender 的 createView 方 
法 创建 一 个 TextView，TextView 是 Android 原 生 系 统 上 的 一 个 内 置 文本 


控件 的 基 类 ， 和 HTML 的 <p> 标 签 类 似 ， 可 以 用 来 创建 移动 端 上 的 一 个 

文本 域 展 示 一 段 文 字 。 此 时 客户 端 会 解析 到 这 段 协议 串 ， 调 用 原生 应 用 
动态 创建 文本 控件 TextView 的 界面 内 容 雄 厂 (类 似 于 HTML 的 文档 碎片 
a 片段 ) ， 这 里 Android 中 TextView 的 控件 

内 容 描 述 通过 XML 规范 就 可 以 如 下 表示 。 





<TextView 
style="@style/text_ view_ style" 
android:1layout_ width="fill_ parent" 
android:1layout_height="fill parent" 
android:1layout_ weight="1" 


android:text="hello" /> 


MNV#* 框 架 


Model 数 据 执行 指令 


data: { 《TextView q-text=” text”> 
text: “hello” </TextView> 


} 


框架 交互 协议 封装 层 










执行 success 回 调 
jsbridge://DOMRender: success/createView? 
{text”:” hello”, “element”: “TextView”} 


协议 解析 支持 库 


EventHandle DOMRender other Modules 


es 


















图 4-9 MNV * 开 发 模式 设计 思路 





这 里 也 可 以 传 入 基本 的 样式 为 创建 成 功 的 TextView 添 加 一 些 基 础 样 
式 。 同 样 执行 成 功 后 也 能 回调 JavaScript 传 入 的 Success(0) 方 法 来 异步 执行 
JavaScript 的 其 他 操作 。 


整体 上 设计 实现 这 样 一 个 Native 演 染 机 制 思路 并 不 难 ， 但 是 要 实现 
好 JavaScript 并 和 Native 端 的 封装 ， 难 度 束 比较 大 了 。MNV* 框 架 端 的 主 
要 任务 是 解析 Model、ViewModel 或 Virtual DOM 组 成 JSBridge 协 议 串 并 
发 送 ， 而 Native 端 的 实现 将 会 比较 复杂 ， 需 要 处 理 不 同 的 标签 元 素 解 
析 ， 例 如 遇 到 <TextView> 标 签 则 创建 TextView 控 件 ， 遇 到 <Layout> 标 签 
创建 Layout 控 件 ， 还 可 能 需要 处 理事 件 的 绑 定 等 ， 即 将 JavaScript 的 事件 
通过 Native 事 件 来 实现 。 整 体 上 像 是 使 用 移动 端 原生 的 方式 来 解析 
HTML 上 需要 实现 的 应 用 功能 。 





MNV* 的 基本 原理 主要 是 将 JSBridge 和 和 DOM 编程 的 方式 进行 结 
合 ， 让 前 端 能 够 快速 构建 开发 原生 界面 的 应 用 ， 从 而 脱离 DOM 的 交互 
模式 。 这 一 节 简 要 介绍 了 MNV 关 的 基本 实现 思路 ， 大 家 也 可 以 根据 兴 
趣 和 业务 场景 来 选择 使 用 目前 主流 的 MNV 关 开发 框架 进行 和 尝试， 而且 
目前 MNV 关 开发 模式 也 正 处 于 一 个 推广 应 用 阶段 ， 相 信 未 来 会 更 加 普 
有 








4.5 ”本章 小 结 


在 这 一 章 中 ， 我 们 就 前 端 各 类 框架 进行 了 原理 性 分 析 ， 从 直接 
DOM 编 程 到 MV 大 交互 模式 ， 再 到 Virtual DOM 编 程 理念 ， 以 及 MNV* 
的 这 染 方式 ， 前 端 框架 一 直 秉 承 着 提高 效率 和 性 能 的 守则 一 步 步 变 化 。 
在 学 习 这 章 的 同时 ， 我 们 也 需要 深入 理解 体会 各 类 框架 的 实现 设计 方 
式 ， 这 样 才能 理解 前 端 框架 的 变化 规律 。 作 为 前 端 工 程 师 ， 我 们 需要 这 
种 奶 根 究 底 的 精神 。 下 一 章 将 开始 分 析 讲 解 大 型 前 端 项 目 中 的 应 用 实践 
技术 ， 让 读者 们 学 习 和 了 解 在 实际 的 项 目 开发 中 应 该 具备 哪些 方面 的 知 
识 和 能 











第 5 章 ”前 问 项 目 与 拉 术 实践 


现代 前 端 技 术 飞 速 及 展 ， 最 终 形成 了 以 效率 和 质量 为 核心 的 两 大 趋 
势 。 就 效率 而 言 ， 在 大 型 前 并 项 目的 开 及 中 ， 规 范 的 制定 、 框 架 的 出 现 
与 升级 、 构 建 的 使 用 更 新 、 组 件 化 的 设计 实现 等 都 在 于 让 前 端 能 更 快 、 
更 局 效 地 完成 更 多 的 事情 。 质 量 方面 ， 前 端 优化 的 提出 、 前 并 用 户 数 据 
的 收集 、 错 误 日 志 的 收集 上 报 等 ， 部 是 为 了 帮助 开发 者 来 提 高 前 站 性 

， 提 升 用 户 体验 。 目 前 ， 前 并 已 经 进入 了 以 效率 和 质量 为 核心 的 工业 
pe 各 类 辅助 工具 和 技术 的 使 用 大 大 减少 了 前 器 开 发 的 重复 工作 
量 ， 省 去 了 很 多 低 效 的 操作 。 在 这 一 章 中 ， 我 们 将 以 不 同 专题 的 形式 一 
起 来 看 一 看 前 端的 高 效率 技术 和 质量 提高 手段 是 如 何在 大 型 项 目 中 实践 
运用 的 ， 这 也 是 我 们 作为 一 名 前 端 工 程 师 必须 具备 的 工程 思维 和 能 














5.1 前 痕 开 发 规范 


开发 规范 可 以 认为 是 软件 开发 工程 师 之 间 交 流 的 妃 一 种 语言 ， 它 在 
一 定 程度 上 决定 了 团队 协作 过 程 中 开发 的 程序 代码 是 人 否 具 有 一 致 性 和 易 
维护 性 ， 统 一 的 开发 规范 毅 币 可 以 降低 代码 的 出 错 概率 和 团队 开发 的 协 
作成 本 。 开 发 规范 制定 的 重要 性 不 言 而 噜 ， 使 用 怎样 的 规范 义 成 为 了 为 
一 个 问题 ， 因 为 编程 规范 并 不 唯一 。 通 俗 地 讲 ， 规 范 的 差别 很 多 时 候 只 
古代 码 写法 的 区 别 ， 不 同 的 规范 都 有 各 目的 特点 ， 疫 有 优 劣 之 分 ， 在 选 
择 时 也 没 必要 纠结 于 使 用 哪 一 种 规范 ， 不 过 既然 规范 是 提高 一 个 团队 开 
发 效率 的 虚拟 工具 ， 那 么 在 一 个 团队 里 还 是 尽 可 能 使 用 同一 种 开发 规范 
比较 好 。 





实际 上 ， 我 们 平时 所 说 的 开发 规范 更 多 时 候 指 的 是 狭义 上 的 编码 规 
范 ， 广义 上 的 开发 规范 包括 实际 项 目 开发 中 可 能 涉及 的 所 有 规范 ， 如 项 
目 技术 选 型 规范 、 组 件 规 范 、 接 口 规范 、 模 块 化 规范 等 。 由 于 每 个 团队 
使 用 的 项 目 技术 实现 不 一 样 ， 项 目 技术 选 型 规范 、 组 件 规 范 、 接 口 规 
范 、 模 其 化 规范 等 也 可 能 千差万别 ， 但 无 论 是 哪 一 种 规范 ， 推 荐 在 一 个 
团队 中 尽 可 能 保持 统一 。 本 节 中 ， 我 们 移 来 讨论 前 端 开 发 规范 ， 主 要 指 
的 是 狭义 上 的 前 问 编 码 规范 。 


我 们 将 从 前 端 通用 规范 、HTML 规 范 、CSS 规 范 、ECMAScript 5 规 
和 范 、ECMAScript 6 十 规范 和 防御 性 编程 等 几 个 方面 来 回 大 家 介绍 前 端 所 
涉及 的 开发 编码 规范 ， 同 时 也 会 尽量 向 大 家 介绍 这 样 制 定编 码 规范 的 原 
因 和 好 处 ， 如 果 有 读者 觉得 对 规范 的 使 用 都 比较 了 解 了 ， 建 议 跳 过 这 一 
节 ， 继 续 学 习 下 一 节 内 容 。 对 于 本 市 推荐 的 规范 ， 大 家 可 以 选择 性 借 





鉴 ， 不 一 定 作 为 唯一 的 标准 学 习 使 用 。 
5.1.1 前 冰 通 用 规范 
三 层 结构 分 离 


前 端 页 面 开 发 应 做 到 结构 层 CHIML ) 、 表 现 层 〈CSS) 、 行 为 层 
(JavaScript) 分 离 ， 保 证 它们 之 间 的 最 小 契合 ， 这 对 前 期 开发 和 后 期 维 
护 都 是 至 关 重 要 的 。 移 动 端 开 发 可 以 适当 地 进行 CSS 样 式 、 图 片 资源 、 
JavaScript 内 联 ， 内 联 的 资源 大 小 标准 一 般 为 2KB 以 内 ， 人 否则 可 能 会 导致 
HTML 文 件 过 大 ， 页 面 首次 加 载 时 间 过 长 。 





<!-- 不 推荐 --> 
<button style="background-color: #ccc;" onclick="javascript: cons 


</button> 





<!-- 推荐 ,相关 样式 和 JavaScript 逻辑 写 在 外 部 引入 的 CSS 和 JavaScript 又 


<link rel="stylesheet" href="./base.css "> 














<button class="btn btn-primary"> 按 钮 </button> 


<script Src=",./base,jSs"></Sscript> 


缩 进 





统一 使 用 tab“〈 或 4 个 空格 宽度 ) 来 进行 缩 进 ， 可 以 在 开发 编辑 器 或 


IDE 里 进行 设置 。 虽 然 推荐 使 用 4 个 空格 来 缩 进 ， 但 其 实 选择 哪 种 缩 进 方 
式 并 不 重要 ， 重 要 的 是 在 一 个 项 目 中 缩 进 方式 要 保持 一 致 ， 不 要 出 现 混 
用 的 情况 ， 人 否则 会 造成 阅读 上 的 障碍 。 幸 运 的 是 ， 现 在 开发 工具 的 格式 
化 插件 能 帮助 我 们 完成 这 件 事情 ， 所 以 要 尽量 在 开发 工具 中 设置 来 让 工 
具 目 动 完成 这 件 事情 。 











内 容 编 码 

在 HTML 文 档 中 用 <meta charset="utf-8 "> 来 指定 编码 ， 以 避免 出 现 
页 面 乱 码 问 题 。 不 需要 为 CSS 显 式 定 义 编 码 ， 其 默认 为 utf-8。 
/* 不 推荐 */ 


Q@charset "utf-8"， 


html, bodyt{ 


margin: 0; 


padding: 0; 
} 
/* 推荐 */ 


html, bodyt{ 
margin: 0; 


padding: 0; 


小 写 


所 有 的 HTML 标 签 、HTML 标 签 属性 、 样 式 名 及 规则 建议 使 用 小 
写 ， 我 们 一 般 习 惯 使 用 小 写 英 文字 符 ， 大 写 单 词 相 对 不 容易 阅读 和 理 
解 。HIML 属 性 的 id 属性 可 以 使 用 驼峰 大 小 写 组 合 的 命名 方式 ， 因 为 id 
属性 常常 只 用 于 JavaScript 的 DOM 查 询 引 用 ， 而 JavaScript 语 言 标准 推荐 
使 用 弦 峰 大 小 写 组 合 的 命名 方式 ， 因 此 HTML 页 面 上 的 id 属 性 也 尽量 使 
用 这 种 标准 来 写 。 





<!-- 不 推荐 --> 

<UL id="menu_list" class="menu-list"> 
<LI class="menu-list-item"></LI> 
<LI class="menu-list-item"></LI> 
<LI class="menu-list-item"></LI> 


</UL> 


<!-- 推荐 --> 

<ul id="menuList" class="menu-list"> 
<1li class="menu-list-item">1</1i> 
<1li class="menu-list-item">2</1i> 
<1li class="menu-list-item">3</1i> 


</ul> 


代码 单行 长 度 限制 





代码 单行 长 度 不 要 超过 120 字 符 〈 或 80 字 符 ， 具 体 可 根据 团队 习惯 
来 决定 ) ， 长 字符 串 拼接 通 癌 使 用 加 号 来 连接 换行 的 内 容 。 


注释 


尽 可 能 地 为 代码 写 上 注释 ， 无 论 是 HTML、CSS 还 是 JavaScript， 必 


要 的 注释 是 不 能 少 的 。 段 内 容 描述 可 以 使 用 段 注 释 ， 单 行内 容 则 使 用 单 
行 注释 ， 对 于 独立 的 文件 而 言 ， 也 尽量 在 文件 头 部 添加 文件 注释 。 妆 


然 ， 更 推荐 使 用 目 文档 化 风格 的 代码 进行 开发 ， 通 过 代码 的 含义 来 代 符 


注释 。 


/** 
* filename: util.js 


* author: ouvenzhang 














* description: 提供 常见 的 的 工具 函数 集 ， 主 要 包含 








* getDay( ): 获取 中 文 星期 时 间 格 式 ， 例 如 星期 一 








人 formatTime(): 获取 格式 化 后 的 中 文 时 间 表 示 ， 例 如 2016 年 12 月 12 | 


* 


大 


let util = {}; 


A 
* 获取 带 中 文 的 星期 字符 串 








* @param {[timestamp]} timestamp [输入 的 时 间 稚 ] 
* @return {[string]} [返回 中 文 星期 时 间 表示 ] 


* 





function _getDay(timestamp) { 








// 默认 的 星期 表示 字符 串 


const Day = [ ' 星 期 日 '， 








' 星 期 一 "， 





' 星 期 二 '， 





' 星 期 三 ' ， 





' 星期 四 '， 





三 | 


二 











VT 
AN 


] 


return Day[timestamp.getDay()]; 


module.exports = { 


getDay: _getDay, 





目 文 档 化 开发 是 目前 比较 提倡 的 一 种 书写 带 有 具体 含义 项 目 代 码 
的 编码 方式 ， 它 提出 要 尽 可 能 让 代码 本 喘 来 表示 代码 执行 的 功能 朱 
述 ， 而 减少 文档 注释 的 书写 ， 因 为 文档 注释 需要 更 多 的 时 间 去 维护 。 
在 下 面 的 例子 中 ， 第 二 种 方式 就 比 第 一 种 方式 更 加 清晰 ， 即 使 不 使 用 
注释 也 能 很 容易 理解 代码 的 的 人 骆 义 ， 而 第 一 种 方式 一 定 要 添加 注释 说 
明 才 能 理解 其 中 的 含义 。 











// 代码 块 一 
if(lel.offsetwidth && !el.offsetHeight) {} 


// 代码 块 二 
function isVisible(el) { 
return lel.offsetwidth && lel.offsetHeight; 


} 
if(!isVisible(el)) 人 0 


再 如 : 


// 代码 块 一 
let width = (Value - 0.5) * 16; 


// 代码 块 二 


let width = emToPixels(value); 


function emToPixels(ems) { 


return (ems - 0.5) * 16; 


行 尾 空格 与 符号 

删除 行 尾 空格 与 多 余 的 符号 ， 这 些 内 容 是 没有 必要 存在 的 。 
5.1.2 前端 HTML 规范 

文档 类 型 定义 


统一 使 用 HTML5 的 标准 文档 类 型 <IDOCTYPE html> 来 定义 ， 这 样 
更 简洁 ， 而 且 向 后 兼容 。 不 使 用 HITML 4.01 的 DTD 定 义 。 


<!-- 不 推荐 - -> 
<IDOCTYPE html]l PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://w 
DTD/xhtml111.dtd"> 


<!-- 推荐 --> 
<!DOCTYPE html> 


head 内 容 


head 中 必须 定义 title、keyword、description， 保 证 基本 的 SEO 页 面 
关键 字 和 内 容 描 述 。 移 动 端 页 面 head 要 添加 viewport 控 制 页 面 不 缩放 ， 
有 利于 提高 页 面 泻 染 性 能 。 建 议 在 页 面 <head> 上 加 上 基本 的 社交 RICH 
化 消息 ， 保 证 网 页 地 址 分 享 到 主流 社交 平台 后 显示 页 面 的 缩 略图 、 标 题 
和 摘 述 等 。 





<!-- 推荐 --> 

<meta name="viewport" content="width=device-width,minimum-scale=1 
user-scalable=no"/> 

<meta itemprop="name" content=" 页 面 标题 "> 


<meta name="description" itemprop="description" content=" 页 面 内 容 措 





<meta itemprop="image" content="http://www.domain.com/assets/logo 


省 略 type 属 性 





在 引用 CSS 或 JavaScript 时 ， 可 以 省 略 type 属 性 不 写 ， 因 为 HIML5 在 
引入 CSS 时 默认 type 值 为 text/css， 在 引入 JavaScript 时 默认 type 值 为 


text/Javascript。 


<!-- 不 推荐 --> 


<link type="text/css" rel="stylesheet" href="./base.css"> 


<script type="text/javascript" src="./base,.js"></script> 


<!-- 推荐 --> 
<link rel="stylesheet" href="./base.css"> 


<script src="./base.js"></script> 














使 用 双 引 号 包 囊 属性 值 





所 有 的 标签 属性 值 必须 要 用 双 引 号 包 里 ， 不 允许 有 的 用 双 引 号 有 的 
用 单 引 号 ， 这 样 有 利于 区 分 标签 的 属性 名 和 属性 值 。 


<!-- 不 推荐 --> 


<div class='ui-dialog'></div> 


<!-- 推荐 --> 


<div class="ui-dialog"></div> 


属性 值 省 略 
非 必需 的 属性 值 可 以 省 略 。 例 如 输入 杠 里 的 readonly、disabled 和 
reduired 等 属性 值 是 非 必 需 的 ， 可 以 省 略 不 写 。 


<t 这 推荐 汪 小 
<input type="text" readonly="readonly"> 


<input type="text" disabled="disabled"> 


<!-- 推荐 --> 


<input type="text" readonly> 


<input type="text" disabled> 


所 有 元 素 必 须 正确 般 套 ， 尽 量 使 用 语义 化 标签 ， 不 允许 交叉 ， 也 不 
允许 在 inline 元 素 中 包含 block 元 素 。 


i- 于 蕉 荐 二 少 


<span> 





<div> 这 是 一 个 块 级 div 元 素 <p> 





</div> 这 是 一 个 块 级 p 元 素 </p> 
</span> 
<ul> 
<h3>list</h3> 
<1i>ouven</1i> 
<1i>zhang</1i> 


</ul> 


<!-- 推荐 --> 


<div> 





<p> 这 是 一 个 块 级 div 元 素 </p> 





<p> 这 是 一 个 块 级 p 元 素 </p> 
</div> 
<div> 

<h3>list</h3> 


<ul> 


<1i>ouven</1i> 
<1i>zhang</1i> 
</ul> 


</div> 


标签 闭合 


非 自 闭合 标签 必须 添加 关闭 标识 ， 自 闭合 标签 无 须 关 闭 。 在 W3C 的 
不 同 规范 中 ， 标 签 的 闭合 检查 也 是 不 一 样 的 。XHTML 较 为 严格 ， 必 须 
在 自 闭合 标签 中 添加 “/”， 在 HTML4.01 中 ， 不 推荐 在 自 闭合 标签 中 添 
加 “/”。 而 HTML5 则 较为 宽松 ， 添 不 添加 “ / ”都 符合 规范 。 











<!-- 不 推荐 --> 


<link rel="stylesheet" href="./base.css"></1link> 


<p>ouvenzhang... 
<!-- 推荐 --> 


<link rel="stylesheet" href="./base.css"> 


<p>ouvenzhang...</p> 


使 用 img 的 alt 属 性 


为 <img> 元 系 加 上 alt 属 性 ，alt 属 性 的 内 容 可 以 简要 描述 图 片 的 内 
容 ， 有 利于 页 面 搜索 引擎 优化 ， 而 且 对 于 盲人 用 户 和 图 像 加 载 失败 时 的 
提示 也 很 实用 ， 即 文 持 无 障碍 阅读 和 提示 ， 所 以 要 尽量 避免 alt 的 属性 值 





>» SR 
为 空 
YL 


<!-- 不 推荐 --> 


<img src="banner.jpg"> 


<!-- 推荐 --> 





<img src="banner.jpg"” alt=" 宣 传 图 片 "> 


使 用 label 的 for 属 性 





为 表单 内 部 元 素 <label> 加 上 for 属 性 或 者 将 对 应 控件 放 在 <label> 标 
签 内 部 ， 这 样 在 点 击 <label> 标 签 的 时 候 ， 同 时 会 关联 到 对 应 的 input 或 
textarea 上 选中 ， 可 以 增加 输入 的 啊 应 区 域 。 








<!-- 不 推荐 --> 


<label> 葛 色 </label><input type="radio" name="color" value="#00f"> 





<label> 红 色 </label><input type="radio" name="color" value="#f00"> 


<!-- 推荐 --> 


<label for="blue"> 药 色 </label><input type="radio" id="blue" name=" 





<label for="red"> 红 色 </label><input type="radio" id="red" name="cc 





<!-- 或 推荐 --> 


<label><input type="radio" name="color" value="#00f"> 蓝 色 </label> 





<label><input type="radio" name="color" value="#f00"> 红 色 </label> 


按 模块 添加 注释 


在 每 个 大 的 模块 的 开始 和 结束 的 地 方 添加 起 始 注释 标记 ， 便 于 开发 
者 识别 、 维 护 。 


<!- - 新 闻 列表 模块 - -> 
<div id="news" class="g-news"></div> 


<!-- 新 闻 列 表 模 块 结束 - -> 





<!- - 排行 榜 模 块 --> 
<div id="topic" class="g-rank"></div> 


<!-- 排行 榜 模块 结束 - -> 





标签 元 素 格 却 





块 级 元 系 一 般 男 起 一 行 写 。 行 内 元 系 可 以 根据 情况 换行 ， 尽 量 保 证 
行内 元 系 代 人 码 长 度 不 超过 一 行 ， 理 则 要 考虑 为 起 一 行 写 。HTML 的 子 元 
又 要 尽量 相对 其 父 级 进行 缩 进 ， 这 样 更 有 层次 。 








I 二 扒 荐 :二 
<div><hi>name</h1i><p>AAA<em>BBB</em>CCC<span>DDD</ span>EEE</p></d 


<!-- 推荐 --> 
<div> 
<hi>name</h1> 


<p>AAA<em>BBB</em>CCC<span>DDD</ span>EEE</p> 


</div> 


语义 化 标签 


主 合适 的 地 方 选择 语义 合适 的 标签 。 不 要 使 用 被 HTML5 废 弃 用 于 
样式 表现 的 无 语义 化 标签 ， 如 <center>、<font>、<strike> 等 。 


<!-- 不 推荐 移动 端 使 用 废弃 的 标签 - -> 
<section class="m-news g-mod"> 
<header class="m-news-hd"> 
<Center> 头 部 区 域 </center> 
</header> 
<div class="m-news-bd"> 
<font size="3" color="red"> 字 体 标签 </font> 
</div> 
<footer class="m-news-ft"> 
<strike> 底 部 区 域 </strike> 
</footer> 


</section> 


<!-- 推荐 移动 端 语义 化 布局 标签 - -> 
<section class="m-news g-mod"> 
<header class="m-news-hd"> 
头 部 区 域 
</header> 
<div class="m-news-bd"> 
模块 正文 
</div> 


<footer class="m-news-ft"> 


底部 区 域 
</footer> 


</section> 
5.1.3 “前端 CSS 规 范 
CSS 引 用 规范 
使 用 link 的 方式 调用 外 部 样式 文件 ， 外 部 样式 文件 可 以 复 用 并 能 利 


用 浏览 露 缓存 提高 加 载 速度 。 华 止 在 标签 元 素 中 使 用 内 联 样式 ， 人 否则 后 
期 很 不 容易 管理 ， 强 烈 不 建议 使 用 。 





<!-- 推荐 --> 


<link rel="stylesheet" href="main.css"> 


<!-- 不 推荐 --> 
<div style="margin: 10px; padding: 10px;"></div> 


样式 的 命名 约定 


CSS 类 名 命名 一 般 由 单词 、 中 男 线 组 成 ， 当 然 也 有 BEM ( 块 block、 
元 素 element、 修 饰 符 modifier， 是 由 Yandex 团 队 提出 的 一 种 前 端 命名 方 
法 ) 方案 ， 这 里 推荐 一 种 规范 一 一 所 有 命名 都 使 用 小 号 ， 加 上 ui- 等 前 
级 ， 表 示 这 个 类 名 只 用 来 控制 元 素 的 样式 展现 。 不 推荐 使 用 拼音 作为 样 
式 名 ， 尤 其 是 使 用 缩写 的 拼音 与 英文 混合 的 方式 ， 很 让 人 费解 。 





// 不 推荐 
.Xinwen{} 
.XINWEN-1ist{} 
.Xinwen-1l1ist{} 
.Uli-xw-ft{} 


.News{} 


尽量 不 以 info、current、news 等 单个 单词 类 名 直接 作为 类 名 称 ， 单 
独 的 一 级 命名 很 容易 造成 冲突 覆盖 ， 并 且 很 难 理解 。 





// 不 推荐 


news .infof{} 


// 推荐 


.Ui-news .news-info{} 


不 以 模块 表现 样式 来 命名 ， 要 根据 内 容 来 命名 。 比 如 left、right、 
center、red、black 这 类 单词 命名 不 允许 出 现 ， 因 为 若 需 求 要 将 某 个 left 
类 名 的 元 素 放 在 右边 显示 ， 这 就 会 比较 尴 界 。 推 荐 使 用 功能 和 内 容 相 关 


联 的 词汇 命名 ， 如 <nav>、<news>、<type>、<search> 等 。 





// 不 推荐 
.left{} 


.Ccenter{} 


// 推荐 
.Ui-searcht{} 


.Ui-main{} 


HTML 标 签 中 的 id 属性 一 般 用 于 JavaScript 查 询 DOM 使 用 ， 书 写 CSS 
样式 时 不 能 用 id 选择 器 ， 因 为 针对 id 的 元 素 样 式 很 难 复 用 。 
// 不 推荐 


#news{} 


// 推荐 


.Uli-news{} 
简写 方式 
单位 0 的 缩写 。 如 果 属 性 值 为 0， 则 不 需要 为 0 加 单位 。 如 果 是 以 0 为 


个 数位 的 小 数 ， 前 面 的 0 可 以 省 略 不 写 。 尺 量 市 上 分 号， 否则 在 后 面 奶 
加 规则 时 容易 因为 没 写 分 写 而 出 错 。 





// 不 推荐 
.Ui-newst{ 
margin: QOpx; 
padding: QOpx; 
opacity: 0.6 


// 推荐 

.Ui-nNnewst{ 
margin: 0; 
padding: 0; 


opacity: .6; 


去 掉 URL 中 引用 资源 的 引号 ， 这 是 没 必要 的 ， 


// 不 推荐 
body{ 


background-image: url("sprites.png"); 


影响 阅读 。 








缩写 至 3 位 。 





} 
// 推荐 
bodyt{ 
background-image: url(sprites.png); 
} 
颜色 值 写 法 ， 所 有 的 颜色 值 要 使 用 小 写 并 尽量 
// 不 推荐 
bodyt{ 
background-color: #FF0000 
} 
// 推荐 
bodyt{ 
background-color: #f00; 
} 





属性 书写 顺序 


CSS 样 式 书写 顺序 遵循 先 布 局 后 内 容 的 规则 ， 即 先 写 元 素 的 布局 属 
性 ， 再 写 元 系 的 内 容 属 性 。 


// 不 推荐 

.Ui-Nnewst{ 
background: #000 
margin: 10px; 
padding: 10px; 
color: #000 
width: 500px; 
height:200px; 
float: eft 


// 推荐 

.Ui-Nnewst{ 
float: left; 
margin: 10px; 
padding: 10px; 
width: 500px; 
height:200px; 
color: #000 
background: #000; 





这 一 点 比较 容易 理解 。 优 先 布 局 ， 和 常用 的 布局 属性 有 position、 
display、float、overflow 等 。 内 容 次 之 ， 比 如 color、font、text-align。 


Hack 写 法 


可 能 减少 对 CSS Hack 的 使 用 和 依赖 ， 可 以 使 用 其 他 的 解决 方案 代 
蔡 Hack 的 思路 。 如 果 必 须 使 用 浏览 器 Hack， 尽 量 选 择 稳定 、 常 用 并 允 
于 理解 的 书写 方式 。 需 要 注意 的 是 ， 目 前 加 面 端 浏览 器 上 已 经 完全 舍弃 
了 对 Internet Explorer 7 及 以 下 版 本 浏览 器 的 兼容 性 考虑 ， 因 此 当前 CSS 
规则 的 Hack 形 式 写法 推荐 如 下 。 














.Ui-news pt 


color :#000 /* For all */ 
color :#111\9; /* For all IE */ 
color :#222\0; /* For IE8 and later, Opera without webkit 


color :#333\9\0; /* For IE9 and later */ 





CSS 规 则 知 要 实现 在 多 种 浏览 右 内 核 上 兼容 ， 束 要 遵循 先 写 私有 属 
性 后 写 标 准 属性 的 原则 ， 这 样 有 利于 浏览 器 版 本 问 前 兼容 。 


.Ui-newst 
-webkit-box-shadow: 1ipx 1ipx Spx; 
-moz-box-shadow: 1px 1ipx Spx; 
-ms-box-shadow: 1ipx 1ipx Spx; 
-0-box-Shadow: 1ipx 1px Spx; 


box-shadow: 1ipx 1px Spx; 


针对 Internet ”Explorer， 可 以 使 用 条 件 注释 作为 预 留 Hack 来 使 用 ， 
Internet Explorer 条 件 注释 语法 可 以 如 下 书写 。 





<!--[if <keywords>? IE <version>?]> 


<link rel="stylesheet" href="./hack.css" /> 


<![endif]--> 


CSS 高 效 实现 规范 





标签 名 与 id 或 class 组 合 的 选择 器 会 造成 风 余 ， 


速度 ， 应 避免 。 
// 不 推荐 


div#ui-doc-active.ui-doctf{} 


// 推荐 : 
.Ui-docf{} 


而 且 降 低 CSS 的 解析 





尽量 使 用 简短 的 CSS 实 现 方式 ， 
写法 更 简洁 。 


// 不 推荐 : 

body{ 
margin-top: 10px; 
margin-right: 10px; 
margin-bottom: 10px; 


margin-left: 10px; 


// 推荐 : 


对 于 无 继承 关系 的 元 系 使 用 合并 的 


body{ 


margin: 10px; 








不 同 元 素 之 间 属 性 存在 继承 关系 时 ， 使 用 分 拆 方式 ， 避 人 免 继 承 属性 
的 重复 定义 。 


// 不 推荐 : 
.Ui-newst 
font: bold 12px arial, sans-serif; 
} 
.Ui-news . new-infof{ 


font: normal 12px arial, sans-serif,; 


} 
// 推荐 : 
.Ui-newst 
font: bold 12px arial,sans-serif,; 
} 


.Ui-news .new-infof{ 


font-weight:normal; 


使 用 预 处 理 脚 本 编码 开发 





使 用 预 处 理 谍 套 的 方式 描述 元 素 之 间 的 层次 关系 。 


// 不 推荐 

.g-box{} 

.g-box-hd .xx{} 
.g-box-hd .xx .aaf{} 


// 推荐 
.g-boxt{ 


.XX{ 


尽 可 能 使 用 预 处 理 器 的 高 效 语 法 来 提高 开发 效率 ， 如 髓 套 、 变 量 、 
骨 套 属性 、 注 释 、 继 承 等 ， 避 免 直接 使 用 CSS 开 发 。 使 用 SASS 来 编写 
CSS 就 高 效 很 多 。 


@import "reset.scss"; 


// 变量 赋值 与 计算 能 
$width: 5px + 10px; 





$height: 5rem， 

$name: box 

$attr: margin; 

$content: "empty text' 'default; 
$maxwidth: 375px; 

















// 处 理 函 数 
@function getwidth($n){ 





Q@return $n*3rem - irem; 


Q@mixin mod{ 
width: $width ， 
height: ($height + 3rem)/2; 
$font-size: 12px; 
$line-height: 20px; 
font: #{$font-size}/#{$line-height}; 


.Ui-mod-af{ 

// 引用 的 mixin 内 容 将 被 填充 进来 
Q@include mod; 
&:hovert{ 


cursor: pointer; 


} 
&:aftert{ 

content: $content; 
} 


.bp.#{&name}t{ 
#{attr}-left: 4px; 


@media screen and(max-width: $maxwidth){ 


#{attr}-left: 8px; 


// 继承 的 使 用 ， 这 里 .ui-mod-b 继承 了 .ui-mod-a 的 所 有 属性 ， 并 且 禾 写 了 widtl 


.Ui-mod-b{ 








Qextend .ui-mod-a; 
@if null {width: $maxwidth;} 
width: getwidth(3); 


C4 


5.1.4 ” ECMAScript 5 常用 规范 


分 号 


JavaScript 语 句 后 面 统一 加 上 分 号 。 以 前 也 有 人 推荐 统一 不 加 分 号 ， 
但 是 加 上 更 容易 阅读 ， 而 且 更 容易 和 换行 语句 区 分 。 








// 语句 之 间 的 关系 不 容易 直接 看 出 
let operate = 1 
switch(operate)t{ 
case 1: 
console.1lo0g(1) 


break 


case 2: 
console.10g(2) 
break 

case 3: 
console.10g(3) 
break 

default: 
break 

} 

// 语句 之 间 的 关系 相对 清晰 一 点 
let operate = 1; 
switch()t{ 

case 1: 
console.10g(1); 
break; 

case 2: 
console.10g(2); 
break; 

Case 3: 
console.10g(3); 
break; 

default: 


break; 








在 所 有 运算 符 、 符 号 与 英文 单词 之 间 添加 必要 的 空格 ， 利 于 开发 者 
阅读 。 


// 不 推荐 
let a={ 
b :1 
}; 
++ XX; 
Z = X?1:2， 
for(let i=0;i<6;i++){ 


X++， 


了 


// 推荐 
let a={ 

b: 1 
}; 





一 般 推荐 在 代码 块 后 保留 一 行 空 行 ， 显 得 块 内 容 层 次 更 加 分 明 ， 下 


面 的 写法 是 比较 推荐 的 形式 。 


let x = 1; 
for (let i = 0; i < 2; i++) { 
if (true) { 


return false; 


// if 语句 后 保留 空 和 


continue; 








// for 循环 语句 后 保留 空 行 
let obj = { 





foo: function( ) { 
return 1; 


}, 











// 对 象 方法 属性 定义 后 面 保留 一 个 空 行 


bar: function() { 














return 2;，; 


}; 


引 写 


推荐 JavaScript 字 符 串 最 外 层 统一 使 用 单 引 号 。 


// 不 推荐 


let x = "test",; 


// 推荐 
let y = 'foo', 


z = '<div id="z"></div>'; 
变量 命名 


标准 变量 采用 弦 峰 式 命名 。 常 量 使 用 全 大 写 形式 命名 ， 并 用 下 男 线 
连接 。 构 造 函 数 首 字母 大 写 ，jQuery 对 象 推荐 以 “$ ”为 开头 命名 ， 便 于 
分 辨 jQuery 对 象 和 普通 对 象 。 


// 不 推荐 
let max_number = 99; 
let body = $('body'); 


let obj_name; 


function person(name) { 


this.name = name; 


// 推荐 
const MAX_ NUMBER = 99 ， 
const $body = $('body'); 


let objName; 


function Person(name) { 


this.name = name; 


对 象 








对 象 属性 名 不 需要 加 引号 。 对 象 属性 键 值 以 缩 进 的 形式 书写 ， 不 要 
写 在 同一 行 。 数 组 、 对 象 属性 后 不 能 有 去 号 ， 人 否则 部 分 浏览 右 可 能 会 解 
析出 错 。 


// 不 推荐 
let a = A dy "C2 
let b = [1, 2, 3,] 


// 推荐 
let a={ 
b: 1, 
C2 
}; 


let b = [1, 2, 3]; 


大 括号 





程序 中 的 块 代码 推荐 使 用 大 括号 包 庄 ， 要 注音 换行 ， 这 样 更 加 清 
晰 ， 而 且 方 便 后 面 扩 展 增加 内 容 。 


// 不 推荐 
if (condition) 


doSsomething( ); 


// 推荐 

if (condition) { 
doSsomething( ); 
// 添加 其 他 内 容 


条 件 判断 


尽量 不 要 直接 使 用 undefined 进 行 变 量 判 断 ， 使 用 typeof 和 字符 
串 "undefined' 对 变量 类 型 进行 判断 。 分 别 用 ===、!= 三 代 痊 ==、! 王 更 加 
严谨 。 
// 不 推荐 


if (name == undefined) { 


return false; 


// 推荐 
if (typeof person === 'Undefined') { 


return false; 


不 要 在 条 件 语句 或 循环 语句 中 声明 函数 


// 不 推荐 
let name = "ouven 


if (name) { 


sayHi(name); 


function sayHi (name ){ 


console.log( HI ${name}. ); 


} 
} 
// 推荐 
let name = 'ouven'; 


if (name) { 


sayHi(name); 


function sayHi (name)t{ 


console.log( HI ${name}. ); 


一 些 其 他 的 可 选 规范 参考 


for-in 循 环 里 面 要 尽量 含有 hasOwnProperty 的 判断 ， 防 止 访问 不 存在 
的 对 象 属性 时 出 错 。 不 要 在 内 置 对 象 的 原型 上 添加 方法 ， 如 Array、 
Date， 人 否则 会 污染 JavaScript 内 置 对 象 。 不 要 在 同一 个 作用 域 下 声明 同名 
变量 ， 这 是 不 安全 的 JavaScript 书 写 方法 ， 严 格 模式 下 是 禁止 使 用 的 。 移 
除 声 明 但 未 使 用 过 的 变量 。 不 要 在 应 该 比较 的 地 方 赋值 。 不 要 像 new 
function () {...}、new Object() 等 这 样 使 用 构造 函数 。 








5.1.5 ” ECMAScript 6+ 参 考 规范 
ECMAScript 5 的 通用 编码 规范 在 ECMAScript 6 十 中 同样 适用 ， 但 还 
是 推荐 使 用 Ecmacript 6+ 更 高 效 的 语法 来 实现 与 ECMAScript 5 相同 的 功 


全 已 
月 上。 


正确 使 用 ECMAScript 6 的 变量 声明 关键 字 


let c= 'c'， 


const dd; // Uncaught SyntaxError: Missing initializer in c 


console.log(c); // Uncaught ReferenceError: c is not defined 


b = 'world'; 


字符 串 拼 接 使 用 字符 串 模板 完成 


// 不 推荐 
let name = 'ouven'，; 
let str = '<h2>hi, ' +name + '</h2>' + 


'<p>hello, world!</p>"'+ 
'<p>2016-12-12</p>'， 


// 推荐 
let name = 'ouven'，; 
let str = ‘<h2>hi, ${name}</h2> 


<p>hello, world!</p> 
<p>2016-12-12</p> 


. 





解构 赋值 尽量 使 用 一 层 解构 ， 人 否则 声明 变量 舱 套 太 深 难 


以 理解 
// 不 推荐 
Jet [[a,b], c] = [[11,22], 33]; 
let {d, e} = { 
d: { 


key:{ 


name: 'ouven' 


// Uncaught TypeError: Assignment to constant let 





}, 
e: { 
key:{ 
name: ' zhang 
} 
}; 
// 推荐 


let [a, b, c] = [i11, 22, 33]; 
let {d, e} ={ 
d: 'ouven', 

e: 'zhang', 


}; 


数组 拷贝 推荐 使 用 ... 实 现 ， 更 加 简洁 高 效 


const items = [1, 2, 3]; 


let itemsCopy = [1]; 


// 不 推荐 
for (let i = 0,1en = items.length; i < len; i++) { 


itemsCopy[i] = items[i]; 


// 推荐 


itemsCopy = [...items]; 


数组 循环 遍历 使 用 for...of， 非 必须 情况 下 不 推荐 使 用 
forEach、map、 人 简单 循环 


const items = [1, 2, 3]; 


// 不 推荐 
for (let i = 0, len = items.length; i < len; I++) { 


console.1log(items[i]); 


// 推荐 
for (let item of items) { 


console.1log(item); 


使 用 ECMAScript 6 的 类 来 代 蔡 之 前 的 类 实现 方式 ， 尽 量 
使 用 constructor 进 行 属 性 成 员 变 量 赋值 


// 不 推荐 

function Foo(name) { 
this.name = name; 
this.sayHi = function()t 


console.1log('Hi, ' + this.nanme); 


// 推荐 
class Foo { 
constructor(name = 'ouven') { 
// constructor 


this.name = name， 


} 
sayHi() { 

console.log( Hi, ${this.name}. ); 
} 








模块 化 多 变量 导出 时 尽量 使 用 对 象 解构 ， 不 使 用 全 局 导 
出 。 尽 量 不 要 把 import 和 export 写 在 一 行 


// 不 推荐 


import * as util from './lib/util'; 


// 推荐 
import { time } from './lib/util'; 


// 不 推荐 
export default { time } from './lib/util'; 


// 推荐 
import { time } from './lib/util'; 


export default time; 











导出 类 名 时 ， 你 持 模 块 名 称 和 文件 名 相同 ， 类 名 首 字 符 





// 推荐 文件 命名 为 Base .js 


class Base { 


export default Base; 


生成 器 中 yield 进 行 异 步 操作 时 需要 使 用 try...catch 包 于 ， 
方便 对 异常 进行 处 理 


// 不 推荐 
const getNews = function* (){ 


this.body= yield render('path/template') 


// 推荐 
const getNews = function* (){ 


tryt{ 
this.body= yield render('path/template') 


}+catch(e){ 


lo0g.error(e); 








推荐 使 用 Promise， 避 人 免 使 用 第 三 方 库 或 直接 回调 ， 原 生 
的 异步 处 理性 能 更 好 而 且 符 合 语 言 规范 




















// 不 推荐 使 用 回调 方式 来 处 理 异步 


process('filename', function(data)t{ 





let result = data,; 


}); 











// 推荐 使 用 Promise 来 处 理 


let promise = new Primise(function(resolve, reject){}); 








promise.then(function()t{ 
// 成 功 处 理 
}, function()t{ 
// 失败 处 理 
}); 
































如 宁 不 是 必须 ， 避 免 使 用 迭代 器 


友 代 器 Iterators 性 能 比较 差 ， 对 于 数组 来 说 大 致 与 
Array.prototype.forEach 相 当 ， 比 不 过 原生 的 for 循 环 ， 而 且 使 用 起 来 比较 


腑 烦 。 目 前 数组 遍历 提供 了 for...of 方 法 ， 对 象 毅 历 提 供 了 for 
所 以 非 必须 情况 下 还 是 不 建议 使 用 迭代 器 。 


const numbers = [1, 2, 3, 4, 5]; 


// 不 推荐 
let iterator = numbers[Symbol.iterator](); 
let result = iterator.next(); 
let sum = 0; 
while (!result.done) { 
sum += result.value,; 


result = iterator.next(); 


// 推荐 
let sum = 0; 
for (let num of numbers) { 


sum += num; 


...in 方 法 ， 


不 要 使 用 统一 码 ， 中 文 的 正则 匹配 和 计算 较 消耗 时 间 ， 


而 且 容 易 出 问题 
合理 使 用 Generator， 推 荐 使 用 async/await， 更 


// 不 推荐 


加 简洁 


const generator = function* (){ 
const numbers = [1, 2, 3, 4, 5]; 

for(let number of numbers)t{ 
yield setTimeout(function()t{ 

console.1log(number); 


}, 3000); 


let result = generator(); 
let done = result.next(); 
while('done.done)t 

done = result.next(); 


} 


console.1log('finish"'); 


// 推荐 


const asyncFunction = async function (){ 


const numbers = [1, 2, 3, 4, 5]; 
for(let number of numbers)t{ 
await sleep(3000); 


console.1log(number); 


let result = asyncFunction(); 


console.1Log( 'finish' )， 


具体 关于 ECMAScript 6 十 特性 的 介绍 和 使 用 可 以 参考 本 书 第 3 章 的 
内 容 。 


5.1.6 ” 前端 防御 性 编程 规 疙 








前 端 防御 性 编程 通常 不 是 代码 规范 中 的 内 容 ， 但 却 古 前 端 影 响 网 页 
功能 稳定 性 的 一 个 很 重要 的 因 系 。 简 单 理 解 ， 防 御 性 编程 是 指 通 过 检测 
任何 可 能 存在 的 逻辑 异常 问题 的 代码 实现 ， 提 高 脚本 执行 过 程 健 壮 性 的 
一 种 编程 手段 。 防 御 性 编程 要 求 我 们 对 程序 的 实现 进行 更 加 全 面 、 严 谨 
的 考虑 。 在 项 目 实践 中 ， 防 御 性 编程 有 一 些 和 常见 的 应 用 场景 。 











对 外 部 数据 的 安全 检测 判断 


外 部 数据 可 能 是 从 后 端 返回 的 内 容 或 用 户 调 用 函数 时 传 入 的 参数 
等 ， 我 们 先 来 看 一 个 模板 数据 填充 泻 染 的 例子 。 





<div>{{data.userinfo.name }}</div> 





如 果 变 量 data 是 后 端 请 求 返 回 的 外 部 数据 ， 那 么 当 data 没 有 定义 
userinfo 字 段 〈 如 data={}) 时 ， 前 问 的 模板 演 染 区 会 直接 报错 ， 或 者 显 
示 data.userinfo.name 属 性 未 定义 ， 页 面 上 内 容 显示 可 能 为 空 ， 所 以 我 们 
尽量 不 要 让 这 些 情况 出 现 ， 要 以 一 种 更 安全 的 方式 来 展示 ， 并 保证 模板 
的 填充 过 程 不 会 出 错 ， 例 如 在 数据 填充 时 进行 判断 ， 如 有 果 没 有 内 容 则 使 
用 默认 的 文字 代 蔡 。 


// 不 推荐 


<div>{{ data.userinfo.name }}</div> 





// 推荐 
<div>{{ data.userinfo && data.userinfo.name || “默认 命名 ! }}</div> 


再 如 我 们 在 Web 后 端 对 前 端 提交 的 数据 进行 处 理 时 ， 通 常 需要 先进 
行 检验 再 进行 处 理 ， 以 免 产 生 安全 性 漏洞 。 





let id = req.query['id"']; 
// 如 果 id 包含 非 数 字 等 不 合法 内 容 ， 则 提示 出 错 并 返回 ， 如 果 合 法 才 进 行 
if(!/^\d+$/g.test(id))t 








this.body = errorMsg; 

}elsef{ 
let Sql = ‘select * where id=${id}; 
let data = exec(sql); 


this.body = data,; 


规范 化 的 错误 处 理 





对 于 常用 的 AJAX 请 求 或 长 时 间 文 件 读 写 等 可 能 失败 的 异步 操作 ， 
需要 进行 错误 情况 的 处 理 或 异种 捕获 处 理 ， 而 不 应 该 极 静 默 ， 人 否则 一 旦 
出 错 ， 用 户 将 得 不 到 正常 的 提示 ， 对 用 户 体 验 影响 极 大 。 





// 不 推荐 
$.ajax({ 


url: 'path/uril', 
type: 'get', 
success(data)t 


// 数据 请 求 成 功 后 逻辑 






































} 
}); 
// 推荐 
$.ajax({ 
url: 'path/url', 
type: 'get', 
success(data)t 
// 数据 请 求 成 功 后 逻辑 
}, 
error(exception)t{ 
// 请 求 失败 后 的 逻辑 
} 
}); 
// 不 推荐 


this.body = yield render('path/template'); 


// 推荐 
tryt 

this.body = yield render('path/template'); 
}catch(e)t{ 


log.error(e); 


this.body = yield render('path/error'); 





关于 防御 性 编程 需要 注意 的 场景 还 有 很 多 ， 也 是 我 们 编码 过 程 中 必 
须要 注意 的 细 市 ， 这 些 代 码 严 刘 性 上 的 考虑 可 以 大 大 减少 代码 执行 过 程 
中 异 第 出 错 的 概 京 ， 而 且 有 利于 分 析 其 体 的 问题 。 


这 一 市 主要 介绍 了 前 端的 通用 规范 、HTML 规 范 、CSS 规 范 、 
ECMAScript 5 规范 及 ECMAScript 6 十 规范 、 防 御 性 编程 的 思想 ， 这 些 都 
是 实践 开发 中 需要 关注 的 。 当 然 ， 这 里 列举 的 不 一 定 全 面 ， 也 不 是 说 这 
样 束 是 最 好 的 实践 ， 只 是 给 大 家 提供 一 种 可 选 的 方案 ， 也 让 大 家 明白 规 
范 这 样 制定 的 原因 和 好 处 。 大 家 可 以 对 比 下 自己 的 规范 特点 ， 取 长 补 
短 ， 整 理 出 适合 自己 或 团队 的 开发 编码 规范 。 





5.2 ”有 前 问 组 件 规 邢 


上 一 节 中 我 们 了 解 了 前 器 的 开发 编码 规范 ， 这 一 节 我 们 再 来 了 解 一 
下 与 前 端 相 关 的 组 件 规范 。 


什么 是 组 件 规范 ?为 什么 需要 组 件 规范 ? 组 件 规 范 和 开发 规范 有 什 
么 区 别 和 联系 呢 ? 首先 我 们 可 以 认为 所 谓 的 组 件 通 党 是 指 采 用 代码 管理 
中 的 分 治 思 想 ， 将 复杂 的 项 目 代码 结构 拆 分 成 多 个 独立 、 简 早 、 解 灯 合 
的 结构 或 文件 的 形式 进行 分 开 管理 ， 达 到 让 项 目 代 码 和 模块 更 加 清晰 的 
目的 ， 而 组 件 规范 则 是 我 们 进行 拆 分 、 组 织 、 管 理 项 目 代 码 方法 的 一 种 
约定 。 所 以 ， 和 开发 规范 相似 ， 组 件 规范 也 是 一 种 约定 。 不 同 的 是 ， 开 
发 规范 关注 文件 内 部 代码 级 别 的 一 致 性 ， 组 件 规范 则 更 关注 项 目 中 业务 
功能 模块 内 容 组 织 的 一 致 性 。 一 定 程度 上 ， 组 件 规范 包含 了 开发 规范 ， 
因为 看 开发 规范 不 统一 ， 开 发 出 来 的 组 件 风格 便 不 一 致 ， 组 件 规范 便 也 
无 从 说 起 了 。 组 件 规范 能 够 帮助 我 们 对 功能 模块 进行 统一 的 约定 管理 ， 
通过 这 一 约定 ， 任 何 一 个 独立 的 功能 模块 之 间 都 应 该 是 无 灰 合 并 能 和 其 
他 模块 很 好 对 接 和 组 合 的 。 





下 面 先 来 看 一 下 目前 前 端 主流 的 一 些 组 件 相 关 规 范 : UI (User 
Interface， 用 户 界 面 ) 组 件 规范 、 模 块 化 规范 、 项 目 组 件 化 设计 规范 。 
注音 这 三 者 的 区 别 和 联系 ，UI 规 范 一 般 指 UI 层 设计 和 实现 的 规范 及 统一 
性 ， 而 模块 化 主要 指 的 是 JavaScript 模 块 化 开发 的 文件 模块 封装 方式 ， 项 
目 组 件 规范 则 指 的 是 实际 开发 中 整个 项 目 业 务 代 码 之 间 的 组 织 形 式 。 


5.2.1 UI 组 件 规范 


简单 来 说 ，UI 组 件 规 范 强 调 了 一 个 网 站 中 所 有 网 页 结构 层 和 表现 层 
实现 的 一 致 性 。 多 个 地 方 出 现 的 相同 按钮 样式 可 以 通过 公共 定义 的 样式 
规范 类 来 描述 ， 而 不 用 每 个 地 方 都 重复 书写 样式 ， 避 免 使 用 不 同 的 代码 
实现 同一 个 效果 。 试 想 如 果 没 有 规范 的 存在 ， 相 同 作 用 的 按钮 有 时 是 红 
色 ， 有 时 是 绿色 ， 开 发 维护 时 就 比较 难 统一 处 理 了 。 从 Web 前 端的 角度 
来 看 ，UI 层 的 规范 能 带 来 一 些 明 显 的 好 处 。 





o UI 层 风 格 统一 化 。UI 层 风格 统一 化 避免 了 不 同 页 面 的 差异 化 设 
计 风 格 ， 能 让 用 户 使 用 Web 站 点 的 不 同 网 页 外 观 风格 是 一 致 
的 。 





o ”增加 UI 层 复 用 性 。 使 用 UI 规范 的 情况 下 ，UI 层 代码 复 用 性 增 
强 ， 可 以 提高 开发 效率 ， 相 同 功能 的 结构 和 样式 不 用 重复 实 
现 。 


o 更 符合 用 户 的 体验 习惯 。 例 如 红色 按钮 统一 用 来 表示 警告 ， 绿 
色 按 钮 统一 表示 安全 或 成 功 操作 等 。 

o 增加 了 开发 规范 的 统一 性 。 遵 循 统 一 的 规范 ， 避 免 重复 开发 ， 
避免 产生 多 种 风格 的 代码 。 





假如 网 站 中 的 多 个 页 面 含有 很 多 个 按钮 ， 通 常 的 做 法 是 把 这 些 按 钮 
分 成 几 类 ， 为 每 一 个 按钮 元 素 增加 类 名 ， 这 样 写 按钮 时 就 不 用 重复 定义 
了 ， 代 码 如 下 。 


.Ui-btn{ 
position: relative; 
text-align: center; 


background-color: $button-bg-color; 


background-image: $button-bg-image; 
vertical-align: top; 


color: $button-text; 


.Ui-btn-primary{ 
background-color: $button-primary-bg-color; 
border-color: $button-primary-border-color; 
&:Nnot(.disabled):not(:disabled):active, 
&.activef{ 
background: $button-primary-active-bg; 


border-color: $button-primary-active-bg; 


.Ui-btn-warning{ 
background-color: $button-warning-bg-color; 
border-color: $button-warning-border-color; 
&:Nnot(.disabled):not(:disabled):active, 
&.activef{ 
background: $button-warning-active-bg; 


border-color: $button-warning-active-bg; 


这 样 一 来 ， 我 们 定义 不 同 的 HTML 按 钮 就 可 以 直接 使 用 了 ， 而 且 网 
站 任何 其 他 地 方 使 用 按钮 引用 的 方法 是 一 致 的 ， 束 像 使 用 过 的 UI 框 染 一 








样 。 不 同 的 是 ， 我 们 是 根据 网 站 页 面 的 特点 开发 UI 组 件 库 的 。 


<button class="ui-btn ui-btn-primary"> 通 用 按钮 </button> 


<button class="ui-btn ui-btn-warning"> 和 警告 按钮 </button> 








那么 自己 设计 UI 组 件 规范 具体 需要 遵循 哪些 原则 呢 ? 在 实际 的 团队 
开发 中 ，UI 组 件 规范 的 完成 可 能 需要 以 下 几 个 方面 的 协作 。 


1. UI 设 计 一 致 性 。 在 需求 开 友 初始 阶段 ， 一 般 可 以 通过 会 议 讨 论 
等 沟通 方式 反复 确认 保证 UI 层 设计 都 是 准确 的 ， 但 尽管 如 此 ， 如 果 没 有 
UI 规 范 的 约束 ， 仍 有 可 能 出 现 茶 几 个 相同 功能 的 按钮 在 不 同 的 页 面 中 样 
式 不 同 的 情况 。 也 惑 是 说 ，UI 设 计 层 需要 统一 ， 相 同 功能 的 模块 在 相同 
场景 下 纺 构 层 和 表现 层 应 该 是 一 致 的 ， 人 否则 UI 规 范 就 没 办 法 实现 了 。 





2. 开发 实现 的 一 致 性 。 这 就 涉及 开始 说 到 的 编码 开发 规范 了 ， 尽 
可 能 让 所 有 的 UI 层 实现 使 用 同样 的 开发 规范 和 方式 。 例 如 样式 定义 、 图 
片 引 用 、 命 名 规范 等 ， 就 图 片 引 用 来 襄 ， 图 标 使 用 base64 实 现 还 是 使 用 
小 图 片 实 现 ， 抑 或 使 用 iconfont 实 现 ， 都 需要 统一 ， 不 能 多 种 方式 混 
合 ， 否 则 就 增加 了 UI 组 件 的 使 用 复杂 度 。 


所 以 从 开发 实现 上 上， 如果 想 要 设计 实现 一 个 具有 通用 组 件 规范 的 UI 
库 〈 也 可 能 包含 了 JavaScript 逻 辑 ) ， 必 须 考 虑 以 下 几 个 方面 的 问题 。 





o 统一 的 页 面 布局 方案 。 页 面 布 局 使 用 网 格 布局 还 是 REM 方 案 ， 
征 否 需要 文 持 啊 应 式 ， 如 果 是 移动 端 应 该 怎样 适 配 ， 这 些 是 需 


要 优先 考虑 的 。 











o 基础 UI 结构 和 样式 实现 。 样 式 reset、 按 钮 、 图 片 、 亲 单 、 表 单 
等 基础 结构 与 样式 的 统一 化 设计 实现 ， 可 以 极 大 提高 页 面 内 容 


的 复 用 性 和 开发 效率 。 


o 组 件 化 UI 结 构 和 样式 实现 。 例 如 按钮 组 、 字 体 图 标 、 下 拉 沫 
单 、 输 入 框 组 、 导 航 组 、 面 包 届 、 分 页 、 标 签 、 轮 播 、 弹 出 
框 、 列 表 、 多 媒体 、 警 竺 框 等 沿用 组 件 的 实现 。 当 然 网 站 可 能 
不 会 一 次 性 用 到 这 么 多 ， 但 是 如 果 要 考虑 设计 一 个 通用 的 UI 组 
件 库 ， 这 些 仍然 是 要 考虑 的 。 





o 啊 应 式 布 局 。 如 果 需 要 文 持 页 面 啊 应 式 ， 布 局 、 结 构 、 样 式 、 
媒体 、javascript 响 应 式 等 这 些 就 都 要 考虑 了 。 具 体 的 实现 技术 
可 以 参考 第 3 章 第 7 市 介绍 的 内 容 。 








o 扩展 性 。 如 果 茶 个 地 方 用 到 了 比较 特殊 的 样式 或 逻辑 ， 其 他 开 
发 者 也 是 可 以 方便 地 在 原来 的 代码 上 进行 扩展 的 。 





以 SASS 为 例 ， 图 5-1 是 目前 一 个 典型 的 网 站 基础 UI 组 件 库 的 样式 设 
计 结 构 ， 入 口 文 件 base.scss 通 过 引用 不 同 目录 下 不 同 内 容 的 模块 编译 生 
成 浏览 器 运行 的 最 终 CSS 样 式 文件 ， 其 中 每 个 SCSS 文 件 模块 单独 管理 一 
个 功能 的 实现 : _variable.scss 可 以 专门 管理 后 面 可 能 使 用 到 的 变量 值 、 
_Imixin.scss 用 于 统一 管理 需要 复 用 的 样式 规则 、_btn.scss 用 来 实现 具体 
多 个 按钮 组 件 的 样式 、_animation.scss 则 保存 所 有 的 动画 实现 。 















common 


入 口 编译 模块 
base. sess 





placeholder. scss 


图 5-1 UI 组 件 表现 层 管理 








通过 这 样 的 设计 实现 UI 层 组 件 规范 就 会 显得 结构 很 清晰 ， 便 于 团队 
并 行 协作 开发 ， 有 利于 调试 时 快速 定位 问题 。base.scss 中 统一 引入 其 他 
样式 模块 的 代码 如 下 。 


@import 


"common/reset", 
"common/mixin", 
"common/variable", 
"common/icon-font", 


"common/rem", 


"fix/grid", 


"fix/animation", 


"fix/placeholder", 


"component/btn", 
"component/btn-group", 
"component/form", 
"component/slider", 
"component/tab", 
"component/loading", 
"component/notice", 
"component/dialog", 


"component/searchbar"; 


5.2.2 ”模块 化 规范 


模块 化 规范 平时 讨论 比较 多 ， 它 可 以 认为 是 JavaScript 文 件 之 间 相 互 
依赖 引用 的 一 种 通用 语法 约定 ， 就 是 按照 一 定 的 规范 来 号 JavaScript 文 
件 ， 让 它 可 以 方便 地 被 其 他 JavaScript 文 件 引 用 。 就 规范 种 类 来 说 ， 主 要 
包括 AMD (Asynchronous ”Module ” Definition， 异步 模块 定义 ) 、 
CMD (Common Module Definition， 遂 用 模块 定义 ) 、CommonJS、 
import/export 等 ， 未 来 也 可 能 出 现 其 他 的 规范 ， 下 面 逐 个 介绍 。 








AMD 


AMD 是 运行 在 浏览 器 端的 模块 化 异步 加 载 规 范 ， 主 要 以 requireJS 为 








代表 ， 基 本 原理 是 定义 define 和 require 方 法 异步 请 求 对 应 的 javascript 模 
块 文件 到 浏览 器 端 运 行 。 模 块 执行 导出 时 可 以 使 用 函数 中 的 retum 返 回 
结果 。 


// id: 模块 的 命名 ， 可 选 参 数 
// dependencies: 加 载 的 模块 依赖 列表 
// factory: 处 理 函 数 ， 即 对 dependencies 加 载 的 模块 进行 的 处 理 


define(id, dependencies, factory); 






































例如 某 个 主 模 块 main 中 引用 了 两 个 JavaScript 文 件 模块 mod-A 和 mod- 
B， 那 么 主 模块 调用 这 两 个 文件 模块 并 进行 初始 化 的 代码 如 下 。 





// 页 面 中 引用 依赖 的 方式 

require('main', ['./mod-A.js', './mod-B.js'], function(A, B){ 
A.init(); 
B.init(); 

}); 


// mod-A.js 
define('A', ['zepto'], function($){ 
return { 
init(){ 


console.log('A') 


}); 





// mod-B.js 的 写法 


define('B'，[ zepto']，function($)({ 
return { 
Init(){ 


console.log('B') 


}); 





需要 注意 的 是 ， 主 模块 处 理 函 数 是 在 . /mod-A.js 和 . /mod-B.js 加 载 
完成 并 执行 结束 后 才 执 行 的 ， 即 使 处 理 函数 中 没有 用 到 这 两 个 模 
块 ，./mod-A.js 和 . /mod-B.js 一 旦 被 依赖 引用 就 会 被 加 载 执行 。 


CMD 


CMD 是 Seajs 提 出 的 一 种 模块 化 规范 ， 在 浏览 句 端 调用 类 似 
CommonJS 的 书写 方式 来 进行 模块 引用 ， 但 却 不 是 完全 的 CommonJS 规 
范 。CMD 遵 循 按 需 执行 依赖 的 原则 ， 只 有 在 用 到 某 个 模块 的 时 候 才 会 
执行 模块 内 部 的 require 语 句 ， 同 时 加 载 完 某 个 依赖 模块 文件 后 并 不 立即 
执行 ， 在 所 有 依赖 模块 加 载 完 成 后 进入 主 模块 还 辑 ， 遇 到 模块 运行 语句 
的 时 候 才 执行 对 应 的 模块 ， 这 和 AMD 是 有 区 别 的 。 





define(function(require, exports, module) {}) ， 


以 seajs 为 例 ， 主 模块 main 中 引用 了 两 个 JavaScript 模 块 mod-A 和 mod- 
B， 调 用 这 两 个 文件 模块 并 进行 初始 化 的 代码 如 下 。 


seajs.use([' ./mod-A.js' ,， ' ./mod-B.js' ] ,§ function(A, B) { 


A.init(); 


B.init( )， 
}); 





// mod-A.js 的 写法 
define(function(require, exports, module) { 
let $ = require('zepto'); 
module.exports = { 
init(){ 


console.1log('A' ); 


}); 





// mod-B.js 的 写法 
define(function(require, exports, module) { 
let $ = require('zepto'); 
module.exports = { 
init(){ 


console.1log('B'); 





} 
} 
}); 
与 AMD 规 范 不 同 的 是 ， 在 引用 . /mod-A.js 和 . /mod-B.js 两 个 文件 
后 ，seajs 会 下 载 两 个 模块 文件 但 不 会 立刻 执行 ， 在 运行 init 方 法 时 才 会 


分 别 执行 两 个 模块 以 及 处 理 函 数 中 的 动作 。 


CommonJS 


CommonJS 是 Node 端 使 用 的 JavaScript 模 块 化 规范 ， 使 用 require 进 行 
模块 引入 ， 并 使 用 modules.exports 来 定义 模块 导出 。 与 前 面 两 种 方式 相 
比 ，CommonJS 的 写法 更 加 清晰 简洁 。 


// main.js 
let A = require('./mod-A.js'), 


B = require('./mod-B.js'); 


A.init(); 


B.init(); 





// mod-A.js 的 写法 
const $ = require('zepto'); 
module.exports = { 

init(){ 


console.1lo0g('A'); 





// mod-B.js 的 写法 
const $ = require('zepto'); 
module.exports = { 

init(){ 


console.1lo0g('B'); 


我 们 一 般 理 解 的 module.exports 与 exports 是 同一 个 对 象 的 不 同 引 
用 ， 即 exports 可 以 通俗 理解 为 module.exports 的 别名 ， 但 是 在 模块 导出 
时 必须 使 用 module.exports。 


import/export 


import/export 是 ECMAScript 6 定义 的 JavaScript 模 块 引用 方式 ， 是 唯 
一 一 个 遵循 JavaScript 语 言 标准 的 模块 化 规范 ， 在 讲解 ECMAScript 6 的 时 
候 也 重点 进行 了 分 析 。import/export 使 用 import 引 入 其 他 模块 ， 使 用 
export 来 进行 模块 导出 。 





import { initA } from './mod-A.js'; 


import { initB } from './mod-B.js'; 


initA( ); 


initB( ); 





// mod-A.js 的 写法 


import Zepto as $ from 'zepto'; 


export default { 
initA(){ 


console.1log('A' ); 





// mod-B.js 的 写法 


import Zepto as $ from 'zepto'; 


export default { 
initB(){ 


console.1log('B'); 


一 般 不 建议 直接 使 用 import Zepto as $ from'base' 进 行 模块 引用 ， 
但 如 果 需 要 导出 整个 对 象 时 ， 则 必须 这 人 么 做 。 





除了 了 解 这 些 常 用 的 模块 化 规范 外 ， 我 们 也 应 该 尽量 理解 模块 依赖 
加 载 的 过 程 。 例 如 使 用 define 或 require 去 读 取 依赖 模块 的 依赖 列表 进行 
引用 时 ， 一 般 模块 化 支持 库 会 有 一 个 baseUrl 配 置 或 全 局 的 id 配 置 ， 这 时 
引用 的 id 或 路 径 会 与 baseUrl 进 行 拼接 ， 计 算 生 成 一 个 绝对 或 相对 路 径 ， 
例如 .. / path/mod-A.js， 然 后 浏览 器 创建 一 个 <script> 来 加 载 这 个 相对 路 
径 的 文件 〈Node 端 则 是 通过 dlopen 方 法 进行 模块 文件 内 容 读 取 ) 执行 ， 
同时 为 了 避免 循环 依赖 的 问题 ， 我 们 通常 会 将 已 经 加 载 的 文件 标识 存 入 
一 个 缓存 数组 中 ， 例 如 ['.. / path/a.js' ]， 下 次 如 果 重 复 引 用 到 同样 的 文件 
模块 中 则 无 须 重 复 加 载 ， 而 是 直接 引用 这 个 模块 的 返回 ， 然 后 依次 运行 
加 载 的 模块 即 可 ， 这 样 就 完成 了 JavaScript 模 块 文件 的 依赖 引用 与 执行 。 


关于 模块 化 规范 有 一 个 容易 误解 的 地 方 : 很 多 人 认为 AMD 规 范 只 
能 在 浏览 器 端 使 用 ，CommonJS 只 能 在 Node 端 使 用 。 这 里 要 理解 的 是 ， 
模块 化 规范 只 是 规范 ，AMD 最 早 被 使 用 在 浏览 器 端 不 代表 其 只 能 在 浏 
览 器 端 运行 ， 主 要 还 是 取决 于 模块 化 规范 的 支持 库 运 行 在 哪里 。 例 如 
requireJS 能 在 浏览 器 问 运 行 AMD 规 范 ， 在 Node 端 也 可 以 实现 ， 不 过 
Node 并 已 经 有 了 自己 的 规范 ， 束 不 需要 去 尝试 其 他 方式 了 。 


5.2.3 ”项 目 组 件 化 设计 规范 


前 端 技术 发 展 到 现在 ， 为 了 实现 对 其 复杂 的 项 目 进行 管理 ， 我 们 通 
常 使 用 组 件 ， 而 且 目 前 实现 组 件 化 的 方案 也 已 经 越 来 越 多 : Web 
Component 组 件 化 、MVVM 框 架 组 件 化 、 基 于 Virutal DOM 框架 的 组 件 
化 、 直 接 基于 目录 管理 的 组 件 化 等 ， 其 中 基于 每 一 类 方法 的 实践 方案 也 
比较 多 ， 下 面 我 们 选择 一 些 比较 有 代表 性 的 实践 方案 来 看 看 每 种 组 件 化 
的 具体 设计 思路 。 




















Web Component 组 件 化 


前 面 讲 到 了 HTML 己 经 发 展 到 Web Component 规 范 阶段 ， 同 时 也 介 
绍 了 什么 是 Web Component， 我 们 来 看 一 个 简单 的 基于 Web Component 
的 典型 组 件 化 实现 方案 Polymer.Polymer 是 Google 在 2013 年 的 Google IO 
大 会 上 提出 的 一 个 新 的 UI 框架 ， 使 用 了 Web Component 标 准 ， 并 且 针 对 
各 种 平台 的 浏览 器 ，Polymer UI 库 和 组 件 都 具备 较 好 的 兼容 性 。 





Polymer 框 架 的 设计 主要 分 成 三 个 层次 。 








1. 基础 层 platform.js) : 基本 实现 库 。 基 础 层 一 般 都 是 本 地 浏览 
器 的 API， 例 如 Object.observeO0、 事 件 处 理 、shadow DOM、 自 定义 元 
素 、HITML 导 入 、 模 型 驱动 视图 等 。 





2. 核心 层 〈polymer.js) : 可 以 理解 为 实现 基础 层 的 封装 库 。 
3. 元 系 层 : 建立 在 核心 层 之 上 的 UI 组 件 或 非 UI 组 件 。 


我 们 要 明白 ，Web “Component 是 Polymer 框 架 实 现 的 最 重要 基础 ， 
Polymer 的 设计 是 面 问 组件 的 ， 使 用 HIML imports 技 术 来 加 载 组 件 ， 定 
义 的 元 素 也 可 以 没有 用 户 界面 。 我 们 以 自 定义 的 某 个 组 件 为 例 ， 来 看 看 
Polymer 的 具体 实现 思路 。 


<1!1doctype html> 
<html> 
<head> 


<meta charset="utf-8"/> 








<tit1Le> 图 文 组 合 插件 </tit1le> 





<script src="../components/platform/platform.js"></script> 
<!-- import 引入 组 件 内 容 --> 
<link href="./image.html" rel="import" /> 

</head> 


<body> 





<!1-- 这 里 注册 生成 了 一 个 shadow host 为 <x-ijmage> 的 DOM 元 素 --> 
<x-image src="./image.jpg" width="290" height="160"></x-image 
</body> 
</html> 


图 5-2 为 Polymer 组 件 化 规范 样 例 ， 显 示 了 一 个 种 浮 层 文字 的 图 片 显 
示 组 件 。Polymer 文 持 双 回 的 数据 绑 定 ， 更 新 数据 模型 会 反映 在 DOM 
上 ， 而 DOM 上 的 用 户 输入 也 会 立即 修改 数据 模型 上 的 数据 。 对 于 
Polymer 元 系 来 说 ， 对 应 数据 模型 始终 是 元 素 本 身 。 


290x160 


带 交 宇 描述 的 图 片 
图 5-2” ”Polymer 组件 化 规范 样 例 





<x-image name="x-image"> 
<style> 
divt{ 
color: red; 
} 
</style> 
<template> 
<div class="x-image-section"> 
<span class="x-image-image"> 
<img class='image' src="" alt="image" height="200"> 
</span> 
<span class="x-image-text">{{text}}</span> 
</div> 
</template> 


<script> 


Polymer({ 
is; 'x-image', 
properties: { 
text: ' 带 文字 描述 的 图 片 ' 
} }); 


</script> 




















</x-image> 


元 素数 据 模型 可 以 用 如 下 方式 直接 修改 。 








document .querySelector('x-image' ).,text = ' 修 改 的 文字 描述 图 片 '， 














关于 Polymer 应 用 的 内 容 还 有 很 多 ， 这 里 介绍 的 是 Web Component 这 
种 组 件 化 实现 的 技术 原理 和 使 用 。 实 际 上 ，Polymer 自 提出 后 到 现在 并 
没有 得 到 很 广泛 的 实践 ， 但 是 其 遵循 Web Component 规 范 的 这 一 实践 思 
路 被 越 来 越 多 的 组 件 化 框架 借鉴 。 


MVVM 框 架 组 件 化 
MVVM 组 件 化 在 实现 上 比较 有 吸引 力 ， 但 其 实 非 常 简 单 ， 其 基本 


思路 是 将 页 面 中 的 模块 按照 元 素来 划分 ， 并 将 与 这 个 模块 相关 的 
MVVM 描 述 语法 、CSS 样 式 、 执 行 脚 本 放 在 同一 个 文件 里 进行 引用 。 





<style> 
body{ 
background-color: #ccc; 


} 
</style> 


<template> 

<h2>{{ text }}</h2> 

<button q-on="clickEvent(this)"></button> 
</template> 
<script> 

let $ = require('jQuery' ); 

module.exports = { 


data: { 





text: ' 这 是 一 段 描 述 ' 














}, 

events: { 
clickEvent() { 

console.1log(this.model.data. text ); 

} 

} 

}; 
</script> 


一 般 推荐 每 个 组 件 以 单个 文件 的 形式 来 引入 模块 相关 内 容 ， 然 后 通 
过 构建 或 动态 解析 的 方式 动态 获取 该 组 件 包 含 的 CSS、HTML、 
JavaScript 脚 本 到 页 面 中 使 用 ， 而 且 组 件 内 容 书 写 的 方式 也 往往 和 
Polymer 类 似 ， 前 端的 三 层 结构 要 绑 在 一 起 管理 。 相 比 之 下 ， 和 Polymer 
主要 的 区 别 在 于 其 使 用 的 不 是 自 定 义 元 素 组 件 ， 而 是 带 有 MVVM 语 法 
的 HTML 标 签 。 所 以 目前 主流 MVVM 组 件 化 的 设计 思路 和 Polymer 的 实 
现 思路 基本 是 类 似 的 。 




















Virtual DOM 的 组 件 化 方案 





之 前 讲 到 ，Virtual ”DOM 的 出 现 更 多 情况 下 是 为 了 改善 MVVM 的 
DOM 人 性能。 以 reactjs 为 例 ， 虽 然 reactjs 改 变 了 我 们 对 DOM 操 作 的 原 有 理 
解 ， 但 是 在 组 件 化 设计 实现 方面 ， 它 使 用 的 仍 是 和 Polymer 类 似 的 组 织 
管理 方式 ， 所 不 同 的 是 将 HTML 的 结构 描述 换 了 另 一 种 语法 形式 且 
JavaScript 的 调用 API 不 同 。 


const React = require( ' react ' ) ; 
const ReactDOM = require( 'react-dom ') ，; 


const styles = require('./mod.css'); 


let TextImage= React.createClass({ 








// 组 件 Virtual DOM 描述 语法 














clickEvent()t{ 
console.1log(this.props.text); 


}, 


render() { 
return ( 
<div> 
<h2>{ this.props.text }</h2> 
<button onClick="{ this.clickEvent }"></button> 
</div> 


); 


}); 


export default TextIimage; 


这 是 个 简单 的 例子 ， 和 MVVM 的 方式 相 比 ， 其 组 件 内 容 结 构 和 使 
用 方式 仍 是 类 似 的 ， 不 同 点 只 在 于 页 面 敢 辑 的 执行 过 程 和 框 染 的 使 用 ， 
但 这 并 不 是 和 组 件 化 规范 设计 相关 的 内 容 。 








基于 目录 管理 的 通用 组 件 化 实践 








目前 主流 框架 的 组 件 化 实践 方案 虽然 很 多 且 表 现形 式 不 相同 ， 但 是 
实现 设计 的 基本 思路 还 是 一 样 的 ， 即 和 Polymer 保 持 一 致 : 将 页 面 的 三 
层 结构 内 容 绑 定 到 一 起 作为 一 个 独立 的 组 件 存在 ， 然 后 通过 解析 应 用 到 
页 面 中 执行 。 当 然 ， 如 果 将 三 层 结构 直接 绑 到 一 起 可 能 会 有 些 问题 ， 例 
如 CSS 解 析 失 败 会 导致 整个 模块 加 载 失 败 ， 络 构 比 较 混 消 时 三 层 结构 不 
分 离 ， 不 容易 进行 团队 协作 。 














既然 如 此 ， 我 们 使 用 一 个 目录 的 形式 来 分 开 管理 前 端 页 面 的 三 层 结 
构 岂 不 更 加 灵活 方便 吗 ? 对 组 件 的 三 层 结构 进行 文件 划分 ， 各 个 文件 负 
责 目 己 的 功能 部 分 ， 然 后 在 构建 生成 的 时 候 进行 组 件 中 不 同类 文件 内 容 
的 打包 处 理 。 


















































/component 

index.es // 组 件 逻 辑 处 理 
index.scss // 组 件 预 处 理 脚 本 

index ,html // 组 件 HTML 结构 
/img // 组 件 可 能 用 到 的 背景 图 片 








按照 这 个 思路 ， 组 件 三 层 结构 的 每 一 部 分 都 解 耘 合并 且 与 使 用 的 框 
架 无 天 。 例 如 JavaScript 部 分 可 以 任意 选择 ECMAScript 6 十 或 typescript 进 
行 开发 ， 或 者 是 使 用 不 同 的 框架 编写 。CSS 预 处 理 也 能 任意 选择 团队 熟 


人 HTMLE ia 通 前 端 模 板 、MVVM 的 
语法 结构 或 者 Virtual DOM 的 描述 语法 实现 ， 只 要 脚本 支持 即 可 。 


总 结 来 看 ， 尽 管 这 里 讲 了 四 种 不 同形 式 的 组 件 化 实践 方案 ， 但 它们 
的 设计 思路 是 一 怪 的 ， 痢 是 前 端 三 层 结构 的 组 织 规范 设计 。 尺 定 目 前 不 
同 主流 框架 实现 组 件 化 的 思路 都 有 各 目的 之 点 ， 但 并 没有 太 多 差异 的 地 
方 。 因 此 更 推荐 使 用 组 件 目录 式 的 组 件 化 设计 规范 ， 通 过 目录 来 管理 组 
件 ， 而 不 是 通过 文件 或 依赖 具体 的 某 个 框架 。 前 面 的 三 种 方式 也 可 以 很 
容易 地 改 成 基于 目录 规范 的 形式 ， 这 样 就 可 以 做 到 三 层 结构 开发 分 离 并 
且 更 加 灵活 地 控制 ， 更 有 利于 前 端 项 目的 开发 和 维护 。 

















我 们 再 来 看 一 下 设计 一 个 局 效 的 组 件 化 规范 应 该 解决 哪些 问题 。 





o 组 件 之 间 独 立 、 松 耘 合 。 组 件 之 间 的 HIML、JavaScript、CSS 
之 间 相 互 独立 ， 尽 量 不 重复 ， 相 同 部 分 通过 父 级 或 基础 组 件 来 
实现 ， 最 大 限度 减少 重复 代码 。 





o 组 件 间 扇 套 使 用 。 组 件 可 以 藤 套 使 用 ， 但 肉 套 后 仍然 是 独立 、 
松 类 合 的 。 





o ”组件 间 通 信 。 主 要 指 组 件 之 间 的 函数 调用 或 通信 ， 例 如 A 组 件 
完成 某 个 操作 后 希望 B 组 件 执行 东 个 行为 ， 这 种 情况 束 可 以 使 
用 监听 或 观察 者 模式 在 B 组 件 中 注册 该 行为 的 事件 监听 或 加 入 
观察 者 ， 然 后 选择 合适 的 时 机 在 A 组 件 中 触发 这 个 事件 监听 或 
通知 观察 者 来 触发 B 组 件 中 的 行为 操作 ， 而 不 是 在 A 组 件 中 直 
接 拿 到 B 组 件 的 引用 并 直接 进行 操作 ， 因 为 这 样 组 件 之 间 的 行 
为 就 会 产生 耦合 。 











o 组 件 公用 部 分 设计 。 组 件 的 公用 部 分 应 该 被 抽 离 出 来 形成 基础 


库 ， 用 来 增加 代码 的 复 用 性 。 


o ”组件 的 构建 打包 。 构 建 工具 能 够 目 动 解析 和 打包 组 件 内 容 。 








o 弄 步 组 件 的 加 载 模 式 。 在 移动 痢 ， 通 党 考虑 到 页 面 首 屏 ， 寞 步 
的 场景 应 用 非 党 广泛， 所 有 有 异步 组 件 不 能 和 同步 组 件 一 起 处 
理 。 这 时 可 以 将 异步 组 件 区 别 于 普通 组 件 的 目录 存放 ， 并 在 打 
包 构 建 时 进行 异步 打包 处 理 。 


o ”组件 继承 与 复 用 性 。 对 于 类 似 的 组 件 要 做 到 基础 组 件 复 用 来 减 
少 重复 编码 。 


o 私有 组 件 的 统一 管理 。 为 了 提高 协作 效率 ， 可 以 通过 搭建 私有 
源 的 方式 来 统一 管理 组 件 库 ， 例 如 使 用 包 管 理工 具 等。 但 这 点 
即使 在 大 的 团队 里 面 也 很 难 实施 ， 因 为 业务 组 件 的 实现 常常 十 
要 定制 化 而 且 经 常 变 更 ， 这 样 维护 组 件 库 成 本 反而 更 大 ， 目 前 
可 以 做 的 是 将 公用 的 组 件 模 块 使 用 私有 源 管 理 起 来 。 














o 根据 特定 场景 进行 扩展 或 自 定 义 。 如 果 当 前 的 组 件 框架 不 能 满 
足 需 求 ， 我 们 应 该 能 够 很 便捷 地 拓展 新 的 框架 和 样式 ， 这 样 就 
能 适应 更 多 的 场景 需求 。 比 如 在 通过 目录 管理 组 件 的 方案 下 ， 
既 可 以 使 用 MVVM 框 架 进行 开发 ， 也 可 以 使 用 Virtual DOM 框 
架 进 行 开 发 ， 但 要 保持 基本 的 规范 结构 不 变 。 


关于 组 件 规范 ， 我 们 主要 了 解 了 UI 组 件 规范 、 模 块 化 规范 和 组 件 设 
计 规 范 。 对 于 组 件 设计 规范 ， 我 们 要 认识 其 本 质 一 一 前 端 三 层 结 构 的 设 
计 和 组 织 形式 。 个 人 推荐 使 用 目录 的 组 件 规范 设计 形式 来 更 加 灵活 地 管 
理 和 组 织 代码 。 





5.3 ”自动 化 构建 


在 现代 前 并 工程 开发 中 ， 上 自动化 构建 已 经 成 为 一 个 必 不 可 少 的 部 
分 ， 本 节 我 们 束 来 讨论 一 下 前 端 卓 动 化 构建 方面 的 知识 。 





目前 的 构建 工具 多 种 多 样 ， 设 计 的 思路 也 略 有 不 同 ， 但 是 整体 的 实 
现 原理 却 是 基本 一 致 的 。 这 里 我 们 仍 以 讲述 构建 工具 和 流程 原理 性 的 内 
容 为 主 ， 目 的 是 希望 你 不 仅 掌 握 如 何 使 用 现在 的 构建 工具 ， 同 时 也 能 
解构 建 工具 目 动 完成 构建 的 过 程 。 








提 到 前 端 自动 化 构建 工具 ， 我 们 可 以 退 溯 到 软件 开发 时 代 的 

IDE (Integrated Development Environment， 集 成 开发 环境 ) 。IDE 在 软 
件 编译 运行 阶段 将 软件 所 需要 的 代码 、 资 源 、 图 片 等 打包 成 一 个 可 以 独 
立 运 行 的 软件 安装 包 ， 然 后 在 不 同 平台 上 安装 运行 。 前 端 开 发 中 是 没有 
这 样 的 IDE 的 ， 因 为 前 端 代码 不 需要 软件 编译 。 举 一 个 简单 的 例子 ， 我 
们 在 一 个 页 面 中 使 用 了 多 个 背景 图 片 ， 但 是 想 把 这 几 个 背景 图 片 请 求 合 
成 一 个 图 片 〈 俗 称 雪 手 图 ) ， 以 前 我 们 可 能 会 手动 把 这 些 图 片 放 在 一 个 
大 背景 图 片 中 ， 然 后 通过 元 系 的 背景 图 侦 移 量 来 实现 多 个 元 陛 对 它 的 引 
用 。 后 来 ， 页 面 又 添加 了 一 个 图 片 ， 我 们 就 在 这 个 原 有 合成 的 大 图 片 中 
新 添加 了 一 个 图 片 。 很 多 人 应 该 有 过 这 样 的 经 历 ， 这 样 很 肪 烦 ， 于 是 我 
们 希望 能 有 一 个 像 软件 IDE 这 样 的 工具 ， 对 代码 进行 分 析 ， 把 引用 的 各 
种 资源 打包 统一 处 理 ， 上 自动 输出 成 为 理想 的 结构 。 合 并 多 个 背景 图 片 只 
是 其 中 一 个 场景 ， 这 一 类 问题 就 是 前 端 构建 工具 需要 解决 的 ， 某 种 意义 
上 ， 前 端 构 建 工 具 很 像 软 件 开发 IDE 的 编译 打包 处 理 模块 。 











5.3.1 目 动 化 构建 的 目的 


前 端 构建 工具 的 作用 可 以 认为 是 对 源 项 目 文件 或 资源 进行 文件 级 处 
理 ， 将 文件 或 资源 处 理 成 需要 的 最 佳 输 出 结构 和 形式 。 在 处 理 过 程 中 ， 
我 们 可 以 对 文件 进行 模块 化 引入 、 依 赖 分 析 、 资 源 合 并 、 压 缩 优 化 、 文 
件 租 入 、 路 径 丛 换 、 生 成 资源 包 等 多 种 操作 ， 这 样 束 能 完成 很 多 原本 需 
要 手动 完成 的 事情 ， 极 大 地 提高 开 友 效率。 


5.3.2 目 动 化 构建 原理 


主流 的 构建 工具 虽然 种 类 较 多 ， 但 原理 相通 。 下 面 我 们 来 看 看 目前 
主流 的 构建 工具 的 实现 原理 和 过 程 。 首 先 要 明确 的 是 ， 自 动 化 构建 是 基 
于 项 目 代码 文件 级 的 分 析 人 处理， 下 面 以 一 个 通用 构建 工具 实现 的 文件 处 
理 流 程 为 例 癌 大 家 介绍 。 











如 图 5-3 所 示 ， 构 建 的 流程 主要 分 成 7 个 基本 步骤 〈 不 同 的 构建 工具 
各 有 差异 ， 但 基本 原理 是 类 似 的 ) : 读 取 入 口 文件 ~ 分析 模 块 引 用 ~ 按 
照 引 用 加 载 模块 模块 文件 编译 处 理 -模块 文件 合并 一 文件 优化 处 理 
写 入 生成 目录 。 








build 1 build 2 build 3 build 4 build 5 build 6 build 7 
分 析 模 块 文件 优化 
引用 处 理 


<!-- index.html --> 
























按照 引用 
加 载 模块 


模块 文件 
编译 处 理 


写 入 生成 


模块 文件 
合并 目录 








图 5-3 ”构建 原理 流程 











<1DOCTYPE html> 

<htm] lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<!--style--> 

</head> 

<body> 
<mod-A></mod-A> 
<mod-B></mod-B> 
<script src="main.]js"></script> 
<!--script--> 

</body> 

</html> 


其 中 模块 A 和 模块 B 组 件 对 应 的 目录 文件 如 下 。 


index.es 
index.html 
index.scss 


img/ 


以 上 面 这 一 个 入 口 文 件 的 index.html 源 文件 为 例 。 这 个 入 口 页 面 文 
件 index.html 中 含有 A 和 B 两 个 模块 ， 模 块 A、B 组 件 遵循 统一 的 模块 规 
范 : 每 个 组 件 都 包含 JavaScript、SCSS、HTML 文 件 和 img 目 录 。 我 们 希 
望 构建 后 将 模块 A 和 模块 B 的 内 容 全 部 引用 到 页 面 上 ，CSS 和 JavaScript 
的 脚本 资源 也 经 过 压缩 编译 处 理 ， 而 且 最 后 打包 后 的 资源 引用 达到 最 优 
预 上 线 的 状态 。 根 据 上 面 的 构建 处 理 流程 ， 我 们 将 构建 任务 分 成 7 个 阶 


段 (分 别 命名 为 build1~build7) ， 有 具体 如 下 。 


o_ build1 读 取 入 口 文件 阶段 。 构 建 工 具 会 读 取 index.html 源 文件 到 
一 个 字符 串 Buffer 〈 或 者 文件 对 象 ) 中 。 


o build2 分 析 模 块 引 用 阶段 。 根 据 特定 的 标识 《例如 mod- 开 头 的 
自 定 义 标签 ) 分 析出 页 面 字符 串 Buffer 中 含有 的 两 个 模块 A 和 
模块 B 的 引用 。 


o_ build3 按 照 引 用 加 载 模块 文件 阶段 。 进 入 模块 A、B 目 录 中 读 取 
模块 A 和 模块 B 包 含 的 HTML、SCSS、JavaScript 文 件 。 


o _ build4 模 块 文件 编译 阶段 。 进 行 对 应 的 脚本 转译 《转译 的 工具 都 
是 通过 插件 完成 的 ) 和 依赖 分 析 ， 例 如 将 ECMAScript 6 十 脚本 
转译 成 ECMAScript 5 脚本 模块 引入 、 将 SCSS 文 件 预 处 理 为 CSS 
等 。 该 阶段 完成 后 ， 构 建 工 具 将 生成 编译 后 的 代码 字符 串 
Buffer 。 


o “build5 模 块 文件 合并 阶段 。 将 所 有 JavaScript、CSS 代 码 字 符 串 
Buffer 写 入 一 个 新 的 字符 串 Buffer 中 ， 将 模块 A、B 的 HTML 字 
符 串 Buffer 插 入 index.html 的 字符 串 Buffer 中 ， 生 成 线 上 域名 路 
径 http://www.domain.com/dist/css/main.css 和 
http://www.domain.com/dist/js/main.js， 将 路 径 名 插入 到 
index.html 字 符 串 Buffer 中 代 蔡 注释 <!--style--> 和 <!--script--> 的 
位 置 ， 表 示 CSS 和 JavaScript 脚 本 引用 的 最 终 路 径 。 





o build6 文 件 优 化 处 理 阶 段 。 将 合并 后 的 JavaScript、CSS 代 码 字 符 
串 Buffer 进 行 优化 ， 例 如 去 注释 、 压 缩 等 。 或 将 CSS 引 用 的 多 
个 单 张 背景 图 合成 一 张大 图 ， 这 个 阶段 的 压缩 合并 处理 也 都 是 





可 以 通过 不 同 插件 来 优化 完成 的 。 


o build7 阶 段 。 将 优化 完成 的 字符 串 Buffer 写 入 到 配置 好 的 输出 目 
录 中 ， 将 文件 命名 为 main.js 和 main.css， 对 HTML 字 符 串 Buffer 
进行 去 除 注 释 等 优化 处 理 ， 最 后 写 入 到 输出 目录 中 。 人 至 此 ， 整 
个 构建 流程 完成 。 分 析 人 处理 后 入 口 HTML 文 件 可 能 如 下 ， 而 引 
用 的 CSS 和 JavaScript 文 件 都 是 转译 优化 后 的 代码 文件 。 





<IDOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" href="http://www.domain.com/d 
</head> 
<body> 


<div class="mod-A"> 


</div> 


<div class="mod-B"> 


</div> 

<script src="http://www.domain.com/dist/js/main.js"> 
</body> 
</html> 


处 理 的 文件 以 字符 串 Buffer 或 文件 对 象 的 形式 存在 于 整个 过 程 中 ， 
最 终生 成 文件 的 规则 一 般 是 按照 用 户 自 定义 的 配置 来 完成 的 。 不 同 阶段 





的 处 理 流程 一 般 可 以 通过 第 三 方 插件 来 实现 ， 例 如 上 面 所 到 模块 化 封 
装 、 依 赖 合 并 、 压 缩 优化 、 文 件 供 入 、 路 径 蔡 换 、 生 成 资源 包 等 都 可 以 
借助 插件 来 做 ， 必 要 的 时 候 也 会 自己 编写 插件 。 





从 茶 种 意义 上 来 说 ， 构 建 流程 中 代码 资源 文件 就 像 是 工厂 生产 线 的 
产品 一 样 ， 经 过 多 个 加 工 机 器 进行 处 理 加 工 ， 最 后 打包 封装 生成 想 要 的 
产品 。 早 期 也 有 通过 不 断 读 写 文件 处 理 方式 实现 的 构建 工具 ， 即 每 经 过 
一 次 处 理 束 将 文件 写 到 磁盘 的 条 个 临时 目录 下 ， 人 处理 下 一 个 插件 时 再 从 
这 个 目录 中 读 取出 来 ， 但 这 种 方式 由 于 频繁 地 对 磁盘 进行 读 写 ， 因 此 构 
建 速度 较 慢 ， 目 前 已 经 很 少 使 用 了 。 


5.3.3 ”构建 工具 设计 的 问题 


通过 上 面 的 分 析 ， 我 们 对 构建 工具 的 流程 和 原理 有 了 较 直 接 的 认 
识 ， 并 可 以 使 用 基础 的 工具 搭建 自己 理想 的 构建 环境 。 那 么 在 现代 前 端 
实际 开发 中 通常 希望 构建 工具 帮 我 们 处 理 哪些 问题 呢 ? 

















模块 分 析 引 入 





目前 前 端 开发 模式 基本 已 经 进入 组 件 化 开发 阶段 ， 组 件 化 实现 的 方 
式 也 比较 多 ， 所 以 首先 希望 构建 工具 能 自动 帮 我 们 完成 对 组 件 模 块 的 引 
入 和 分 析 ， 例 如 自动 分 析 require 或 import 的 模块 进行 合并 打包 。 这 样 在 
开发 过 程 中 就 可 以 专注 于 组 件 本 身 ， 而 不 用 关心 组 件 模块 引用 最 终 是 怎 
么 被 构建 打包 的 。 





重点 了 解 一 下 JavaScript 组 件 模块 文件 的 依赖 分 析 过 程 ， 以 require 
的 引用 方式 为 例 。 


1. 从 入 口 模块 开始 分 析 require 函 数 调用 依赖 。 


2. 根据 依赖 生成 JavaScript AST (Abstract Syntax Tree， 抽 象 语 
法 树 ， 是 将 JavaScript 代 码 映 射 成 一 个 树 形 结构 的 JSON 对 象 树 ) 。 


3. 根据 AST 找 到 每 个 模块 的 模块 名 。 
4. 得 到 每 个 模块 的 依赖 关系 ， 生 成 一 个 依赖 字典 。 


5. 根据 模块 化 引用 机 制 包装 每 个 模块 ， 传 入 依赖 字典 以 及 import 
或 require 隙 数 ， 生 成 执行 的 JavaScript 代 人 码 。 


模块 化 规范 支持 


目前 ， 前 端 开发 中 使 用 ECMAScript 6 十 标准 实现 的 项 目 居多 ， 但 大 
多 数 情况 都 是 通过 构建 工具 插件 将 其 转译 成 ECMAScript 5 语法 代码 在 浏 
览 器 中 运行 的 。 这 里 涉及 多 种 JavaScript 模 块 化 规范 之 间 处 理 转换 的 问 
题 ， 好 的 构建 工具 应 该 尽 可 能 文 持 较 多 种 类 模块 化 规范 进行 打包 ， 这 样 
我 们 就 不 用 考虑 模块 化 规范 不 统一 的 问题 了 。 


CSS 编 译 、 目 动 合并 图 片 





CSS 的 预 处 理 、 图 片 引用 的 分 析 、 内 联 图 片 资 源 、 上 自动 合并 雪 扯 攻 








等 功能 在 一 个 理想 的 构建 工具 里 都 是 必 不 可 少 的 。 如 果 构 建 工 具 能 自动 
移 除 解析 后 重复 见 余 的 CSS 规 则 就 更 完美 了 。 


HTML、JavaScript、CSS 资 源 压缩 优化 

为 了 尽 可 能 让 线 上 资源 的 体积 最 小 化 ， 发 布 到 线 上 的 文件 通常 需要 
经 过 构建 工具 的 压缩 优化 处 理 ， 例 如 HIML 内 注释 和 多 余 空 格 的 压缩 、 
JavaScript 的 uglify 操 作 、CSS 的 压缩 等 ， 这 些 都 是 我 们 希望 构建 工具 自 


动 完 成 的 。 


HTML 路 径 分 析 蔡 换 





在 开发 过 程 中 ， 为 了 方便 开发 调试 处 理 ， 我 们 通常 使 用 相对 路 径 来 
进行 文件 的 引用 。 但 是 项 目 开发 完成 上 线 后， 静态 资源 会 发 布 到 绝对 路 
径 甚 至 不 同 的 域名 CDN 路 径 上 ， 这 就 需要 在 上 线 前 对 文件 路 径 进 行 蔡 
换 ， 所 以 我 们 和 希望 构建 工具 也 能 目 动 完成 这 一 工作 ， 即 提供 将 文件 相对 
路 径 目 动 丛 换 成 绝对 路 径 或 线 上 CDN 路 径 的 能 


区 分 开发 和 上 线 目录 环境 


为 了 方便 开发 和 调试 ， 希 望 浏览 器 在 使 用 构建 工具 开发 时 能 加 载 未 
压缩 处 理 的 代码 文件 ， 但 是 准备 上 线 前 需要 对 文件 进行 压缩 优化 处 理 ， 
这 就 要 求 构 建 工具 能 区 分 开发 和 线 上 环境 的 不 同 资源 。 我 们 常常 希望 能 
够 在 配置 构建 任务 时 指明 开发 和 发 布 资源 目录 来 满足 不 同 场景 下 的 需 


要 。 








异步 文件 打包 方案 


异步 文件 加 载 的 场景 很 常见 ， 尤 其 是 在 移动 端 ， 我 们 通 肖 将 首 屏 的 
内 容 优先 展示 ， 然 后 滚动 异步 加 载 后 面 的 内 容 。 为 了 保证 首 屏 加 载 的 资 
源 最 小 ， 非 首 屏 的 内 容 都 希望 通过 JavaScript 来 异步 泻 染 ， 这 就 需要 构建 
工具 能 将 非 首 屏 的 组 件 打包 成 异步 资源 ， 以 按 需 或 异步 的 方式 加 载 。 同 
时 我 们 又 不 和 希望 在 开发 过 程 中 太 关 注 异 步 组 件 和 同步 组 件 的 区 别 ， 所 以 
通常 将 异步 组 件 放 在 异步 的 目录 里 进行 单独 打包 或 加 入 特殊 的 标识 ， 不 
过 也 需要 构建 工具 支持 才 行 。 





文件 目录 白 名 单 设 置 


为 了 加 快 项 目 代 码 构 建 的 处 理 速 度 ， 建 议 提供 一 些 配置 绕 过 不 需要 
处 理 的 文件 目录 ， 人 否则 文件 目录 较 多 的 情况 下 构建 处 理 速度 就 会 比较 


慢 。 


除了 这 些 ， 我 们 还 可 以 配置 构建 工具 来 完成 更 多 的 事情 ， 具 体 可 以 
根据 特殊 需要 来 选择 使 用 ， 所 以 通 津 构建 工具 也 应 该 是 可 以 扩展 的 ， 通 
过 配置 更 多 的 插件 来 共同 完成 项 目 自 动 化 处 理 中 的 任务 。 














这 一 市 主要 讲解 了 构建 工具 的 工作 流程 和 原理 ， 介 绍 得 相对 比较 理 
论 化 ， 和 希望 大 家 结合 自己 使 用 的 构建 工具 去 理解 消化 。 对 于 构建 工具 的 
选择 ， 读 者 可 以 比较 当下 主流 的 构建 工具 并 选择 一 个 合适 的 使 用 。 构 建 
工具 仍 在 不 断 更 新 变化 ， 但 无 论 如 何 ， 构 建 的 基本 原理 是 确定 的 ， 它 的 
最 终 目 的 仍 是 自动 化 完成 一 些 事情 ， 提 高 开发 的 效率 。 














5.4 前 端 性 能 优化 


前 端 性 能 优化 是 一 个 很 宽泛 的 概念 ， 本 书 前 面 的 部 分 也 多 多 少 少 提 
到 一 些 前 端 优化 方法 ， 这 也 是 我 们 一 直 在 关注 的 一 件 重要 事情 。 配 合 各 
种 方式 、 手 段 、 辅 助 系统 ， 前 端 优 化 的 最 终 目 的 都 是 提升 用 户 体验 ， 改 
善 页 面 性 能 ， 我 们 常常 竭尽 全 力 进 行 前 端 页 面 优化 ， 但 却 忽 上 略 了 这 样 做 
的 效果 和 意义 。 先 不 急于 探究 前 端 优化 具体 可 以 怎样 去 做 ， 先 看 看 什么 
古 前 端 性 能 ， 应 该 怎样 去 了 解 和 评价 前 端 页 面 的 性 能 。 























通 音 前端 性 能 可 以 认为 是 用 户 获 取 所 需要 页 面 数据 或 执行 某 个 页 面 
动作 的 一 个 实时 性 指标 ， 一 般 以 用 户 希 望 获取 数据 的 操作 到 用 户 实 际 获 
得 数据 的 时 间 间 隔 来 衡量 。 例 如 用 户 希 望 获取 数据 的 操作 是 打开 某 个 页 
面 ， 那 么 这 个 操作 的 前 端 性 能 就 可 以 用 该 用 户 操作 开始 到 屏幕 展示 页 面 
内 容 给 用 户 的 这 段 时 间 间 隔 来 评判 。 用 户 的 等 待 延 时 可 以 分 成 两 部 分 : 
可 控 等 待 延 时 和 不 可 控 等 待 延 时 。 可 控 等 待 延 时 可 以 理解 为 能 通过 技术 
手段 和 优化 来 改进 缩短 的 部 分 ， 例 如 减 小 图 片 大 小 让 请 求 加载 更 快 、 减 
少 HITP 请 求 数 等 。 不 可 控 等 竺 延 时 则 是 不 能 或 很 难 通过 前 后 端 技术 手 
段 来 改进 优化 的 ， 例 如 鼠标 点 击 延 时 、CPU 计 算 时 间 延 时 、 

ISP (Internet Service Provider， 互 联网 服务 提供 商 ) 网 络 传输 延 时 等 。 
所 以 要 知道 的 是 ， 前 端 中 的 所 有 优化 都 是 针对 可 控 等 待 延 时 这 部 分 来 进 
行 的 ， 下 面 来 了 解 一 下 如 何 获取 和 评价 一 个 页 面 的 具体 性 能 。 


5.4.1 前端 性 能 测试 








获取 和 衡量 一 个 页 面 的 性 能 ， 主 要 可 以 通过 以 下 几 个 方面 : 
Performance Timing API、Profile 工 具 、 页 面 埋 点 计时 、 资 源 加载 时 序 图 
Ws 


Performance Timing API 


Performance Timing API 是 一 个 支持 Internet Explorer 9 以 上 版 本 及 
WebKit 内 核 浏览 器 中 用 于 记录 页 面 加 载 和 解析 过 程 中 关键 时 间 点 的 机 
制 ， 它 可 以 详细 记录 每 个 页 面 资 源 从 开始 加 载 到 解析 完成 这 一 过 程 中 具 
体操 作 发 生 的 时 间 点 ， 这 样 根 据 开 始 和 结束 时 间 惟 就 可 以 计算 出 这 个 过 
程 所 花 的 时 间 了 。 











图 5-4 为 W3C 标 准 中 Performance Timing 资 源 加 载 和 解析 过 程 记 录 各 
个 关键 点 的 示意 图 ， 浏 览 句 中 加 载 和 解析 一 个 HTML 文件 的 详细 过 程 先 
后 经 历 unload、redirect、App Cache、DNS、TCP、Request、Response、 
Processing、onload 儿 个 阶段 ， 每 个 过 程 开 始 和 结束 的 关键 时 间 惟 浏览 器 
己 经 使 用 performance.timing 来 记录 了 ， 所 以 根据 这 个 记录 并 结合 简单 的 
计算 ， 我 们 就 可 以 得 到 页 面 中 每 个 过 程 所 消耗 的 时 间 。 












A loadEventEnd 
loadEventStart 
domComplete 
domContentLoaded 
dominteractive 
domLoading 
unloadEnd 


navigationStart 
redirectStart 
redirectEnd 
fetchStart 
domainLookupStart 
domainLookupEnd 
connectStart 
(secureConnectionStart) 
connectEnd 
requestStart 
responseStart 
/ responseEnd 
图 


unloadStart 


图 5-4 ”performance API 关 键 时 间 点 记录 





function performanceTest()t{ 


let timing = performance.timing, 

readyStart = timing.fetchStart - timing.navigationstart, 
redirectTime = timing.redirectEnd - timing.redirectStart 
appcacheTime = timing.domainLookupStart - timing.fetchst 
unloadEventTime = timing.unloadEventEnd - timing.unloadEv 
lookupDomainTime = timing.domainLookupEnd - timing.domain 
connectTime = timing.connectEnd - timing.connectStart, 
requestTime = timing.responseEnd - timing.requestStart, 
initDomTreeTime = timing.domInteractive - timing.response 
domReadyTime = timing.domComplete - timing.domInteractive 
loadEventTime = timing.loadEventEnd - timing.loadEventSta 


loadTime = timing.loadEventEnd - timing.navigationSstart; 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


CONSO 


le. 
le. 
le. 
le. 
le. 
le. 
le. 
le.log(!" 
le 
le.log(!" 
le. 





请 求 完毕 至 











log(' 准 备 新 页 面 时 间 耗 时 : ' + readyStart)，; 
log('redirect 重 定向 耗 时 : ' + redirectTime); 





log('Appcache 耗 时 : ' + appcacheTime ) 
log('unload 前 文档 耗 时 : ' + unloadEventTime); 
1og('DNS 查询 耗 时 : ' + LookupDomainTime ) ， 
log('TCP 连接 耗 时 : ' + connectTime); 





log('request 请 求 耗 时 : ' + requestTime ) ; 


DOM 加 载 : ' + initDomTreeTime )， 


.1og( ' 解 析 DOM 树 耗 时 : ' + domReadyTime); 


load 事件 耗 时 : ' + loadEventTime); 


log(' 加 载 时 间 耗 时 : ' + loadTime); 


通过 上 面 的 时 间 戳 计算 可 以 得 到 几 个 关键 步骤 所 消耗 的 时 间 ， 对 前 
端 有 意义 的 儿 个 过 程 主要 是 解析 DOM 树 耗 时 、load 事 件 耗 时 和 整个 加 载 


过 程 耗 时 等 ， 不 过 在 页 面 性 


能 获取 时 我 们 可 以 尽量 获取 更 详细 的 数据 信 


晨 ， 以 供 后 面 分 析 。 除 了 资源 加 载 解析 的 关键 点 计时 ，performance 还 提 
供 了 一 些 其 他 方面 的 功能 ， 我 们 可 以 根据 具体 需要 进行 选择 使 用 。 


performance.memory 


performance.now() 


间 ， 可 以 精 古 











角 到 微 秘 ， 








// 内 存 占用 的 具体 数据 





// performance .nowf( ) 方 法 返回 当前 网 页 自 perfo 


用 于 更 加 精 














第 的 计数 。 但 实际 上 ， 目 前 网 页 性 能 通过 毫秒 来 计算 就 








performance .getEntries() // 获取 页 面 所 有 加 载 资源 的 performance timinc 
会 对 网 页 中 每 一 个 对 象 〈 脚 本 文件 、 样 式 表 、 图 片 文件 等 ) 发 出 一 个 HTTP 请 求 。perf 
以 数组 形式 返回 所 有 请 求 的 时 间 统 计 信 息 

performance .navigation // performance 还 可 以 提供 用 户 行为 信息 ， 例 如 网 络 ; 






































一 般 都 存放 在 performance ,navigation 对 象 里 面 
performance ,navigation.redirectCcount // 记录 当前 网 页 重 定向 跳 转 的 次 数 








参考 资料 ;https:/www.w3.org/TR/resource-timing/。 


Profile 工 具 


Performance Timing API 描 述 了 页 面 资源 从 加 载 到 解析 各 个 阶段 的 执 
行 关键 点 时 间 记 录 ， 但 是 无 法 统计 JavaScript 执 行 过 程 中 系统 资源 的 占用 
情况 。Profile 是 Chrome 和 Firefox 等 标准 浏览 器 提供 的 一 种 用 于 测试 页 面 
脚本 运行 时 系统 内 存 和 CPU 资源 占用 情况 的 API， 以 Chrome 浏 览 右 为 
例 ， 结 合 Profile， 可 以 实现 以 下 几 个 功能 


1. 分 析 页 面 脚本 执行 过 程 中 最 耗资 源 的 操作 
2. 记录 页 面 脚本 执行 过 程 中 JavaScript 对 象 消耗 的 内 存 与 堆栈 的 使 


3. 检测 页 面 脚本 执行 过 程 中 CPU 占用 情况 


使 用 console.profile0 和 console.profileEnd0 就 可 以 分 析 中 间 一 段 代码 
执行 时 系统 的 内 存 或 CPU 资 源 的 消耗 情况 ， 然 后 配合 浏览 器 的 Profile 但 
看 比较 消耗 系统 内 存 或 CPU 资源 的 操作 ， 这 样 瓯 可 以 有 针对 性 地 进行 优 
2 


console.profile( ); 





// T0D0S， 需 要 测试 的 页 面 逻 辑 动作 
for(let i = 0; i < 100000; i ++){ 





console.1log(i * i); 


console.profileEnd( ); 


页 面 埋 点 计时 


使 用 Profile 可 以 在 一 定 程度 上 帮助 我 们 分 析 页 面 的 性 能 ， 但 缺点 是 
不 够 灵活 。 实 际 项 目 中 ， 我 们 不 会 过 多 关注 页 面 内 存 或 CPU 资 源 的 消耗 
情况 ， 因 为 JavaScript 有 上 自动 内 存 回 收 机 制 。 我 们 关注 更 多 的 是 页 面 脚本 
逻辑 执行 的 时 间 。 除 了 Performance ” ”Timing 的 关键 过 程 耗 时 计算 ， 我 们 
还 希望 检测 代码 的 具体 解析 或 执行 时 间 ， 这 就 不 能 写 很 多 的 
console.profileO0 和 console.profileEnd0 来 逐 段 实现 ， 为 了 更 加 简单 地 处 理 
这 种 情况 ， 往 往 选 择 通 过 脚本 埋 点 计时 的 方式 来 统计 每 部 分 代码 的 运行 
时 间 。 





页 面 JavaScript 埋 点 计时 比较 容易 实现 ， 和 Performance Timing 记 录 
时 间 惟 有 点 类 似 ， 我 们 可 以 记录 JavaScript 代 码 开始 执行 的 时 间 惟 ， 后 面 
在 需要 记录 的 地 方 埋 点 记录 结束 时 的 时 间 戳 ， 最 后 通过 差 值 来 计算 一 段 
HTIML 解 析 或 JavaScript 解 析 执 行 的 时 间 。 为 了 方便 操作 ， 可 以 将 某 个 操 
作 开 始 和 结束 的 时 间 戳 记录 到 一 个 数组 中 ， 然 后 分 析 数 组 之 间 的 间隔 就 
得 到 每 个 步骤 的 执行 时 间 ， 下 面 来 看 一 个 时 间 点 记录 和 分 析 的 例子 。 











let timeList = []; 


function addTime(tag){ timeList.push({"tag":tag,"time":+new Date} 


addTime("loading"); 
timeList.push({"tag":"load", "time": +new Date( )}); 
// TODOS，load 加 载 时 的 操作 


timeList.push({"tag":"load", "time": +new Date( )}); 


timeList.push({"tag":"process","time": +new Date( )}); 

















// TODOS，process 处 理 时 的 操作 





timeList.push({"tag":"process","time": +new Date( )}); 


parseTime(timeList); // 输出 {load:; 时 间 毫 秒 数 ，process: 时 间 毫 秒 数 } 


function parseTime(time)t{ 
let timeStep = {}, 
endTime; 
for(let i = 0,1len = time.length; i < len; i ++){ 


if(!time[i]) continue; 


endTime = {}; 
for(let j = i+1; j < len; j++ ){ 
if(time[j|] && time[i].tag == time[j].tag)t 
endTime.tag = time[j].tag; 
endTime.time = time[j].time; 


time[j] = null; 


} 
if(endTime.time >= 0 && endTime.tag)t{ 


timeStep[endTime.tag] = endTime.time - time[i].time; 


} 


return timeStep; 





这 种 方式 冲 常 在 移动 端 页 面 中 使 用 ， 因 为 移动 器 浏览 堪 HTML 解 析 
和 JavaScript 执 行 相对 较 慢 ， 通 常 为 了 进行 性 能 优化 ， 我 们 需要 找到 页 面 
中 执行 JavaScript 耗 时 的 操作 ， 如 果 将 关键 JavaScript 的 执行 过 程 进行 埋 
点 计时 并 上 报 ， 就 可 以 轻松 找 出 JavaScript 执 行 慢 的 地 方 ， 并 有 针对 性 地 
进行 优化 。 





资源 加 载 时 序 图 


我 们 还 可 以 借助 浏览 器 或 其 他 工具 的 资源 加 载 时 序 图 来 帮助 分 析 页 
面 资 源 加 载 过 程 中 的 性 能 问题 。 这 种 方法 可 以 粗 粒度 地 宏观 分 析 浏 览 咒 
的 所 有 资源 文件 请 求 耗 时 和 文件 加 载 顺 序 情况 ， 如 保证 CSS 和 数据 请 求 
等 关键 性 资源 优先 加 载 ，JavaScript 文 件 和 页 面 中 非 关 键 性 图 片 等 内 容 延 
后 加 载 。 如 果 因 为 东 个 资源 的 加 载 十 分 耗 时 而 阻 蹇 了 页 面 的 内 容 展示 ， 
那 束 要 着 重 考虑 。 所 以 ， 我 们 需要 通过 资源 加 载 时 友 图 来 辅助 分 析 页 面 
上 资源 加 载 顺序 的 问题 。 





图 5-5 为 使 用 Fiddler 获 取 浏 览 右 访问 地 址 
http://www.jixiangianduan.com 时 的 资源 加 载 时 序 图 。 根 据 此 图 ， 我 们 可 
以 很 直观 地 看 到 页 面 上 各 个 资源 加 载 过 程 所 需要 的 时 则 和 先后 顺序 ， 有 
利于 找 出 加 载 过 程 中 比较 耗 时 的 文件 资源 ， 帮 助 我 们 有 针对 性 地 进行 优 
人 








TRANSFER TIMELINE 


























图 5-5 ”页 面 加 载 文件 资源 时 序 图 
5.4.2 ” 昌 面 浏览 器 前 端 优化 策略 


通过 性 能 测速 和 分 析 ， 我 们 基本 可 以 获取 收集 到 页 面 上 大 部 分 的 具 
体 性 能 数据 ， 如 何 根 据 这 些 数据 采取 适当 的 方法 和 手段 对 当前 的 页 面 进 
行 优化 呢 ? 目前 来 看 ， 前 端 优化 的 策略 很 多 ， 如 YSlow (YSlow 是 
Yahoo 发 布 的 一 蒜 Firefox 插 件 ， 可 以 对 网 站 的 页 面 性 能 进行 分 析 ， 提 出 
对 该 页 面 性 能 优化 的 建议 ) 原则 等 ， 总 结 起 来 主要 包括 网 络 加 载 类 、 页 
面 泻 染 类 、CSS 优 化 类 、JavaScript 执 行 类 、 绥 存 类 、 图 片 类 、 架 构 协 议 
类 等 几 类 ， 下 面 逐 一 介绍 。 








网 络 加 载 类 


1. 减少 HTTP 资 源 请 求 次 数 


在 前 问 页 面 中 ， 通 和 常 建议 尽 可 能 合并 静态 资源 图 片 、JavaScript 或 
CSS 代 码 ， 减 少 页 面 请 求 数 和 资源 请 求 消耗 ， 这 样 可 以 缩短 页 面 冯 次 访 
问 的 用 户 等 得 时间。 通过 构建 工具 合并 雪 和 手 图 、CSS、JavaScript 文 件 等 
都 是 为 了 减少 HTTP 资源 请 求 次 数 。 另 外 也 要 尽量 避免 重复 的 资源 ， 防 
止 增加 多 余 请 求 。 





2. 减 小 HTTP 请 求 大 小 


除了 减少 HTTP 资源 请 求 次 数 ， 也 要 尽量 减 小 每 个 HTTP 请 求 的 大 
小 。 如 减少 没 必 要 的 图 片 、JavaScript、CSS 及 HTML 代 码 ， 对 文件 进行 
压缩 优化 ， 或 者 使 用 gzip 压 缩 传输 内 容 等 都 可 以 用 来 减 小 文件 大 小 ， 缩 
短 网 络 传输 等 待 时 延 。 前 面 我 们 使 用 构建 工具 来 压缩 静态 图 片 资源 以 及 
移 除 代码 中 的 注释 并 压缩 ， 目 的 都 是 为 了 减 小 HITP 请 求 的 大 小 。 


3. 将 CSS 或 JavaScript 放 到 外 部 文件 中 ， 避 免 使 用 <style> 或 <script> 
标签 直接 引入 


在 HTML 文 件 中 引用 外 部 资源 可 以 有 效 利用 浏览 器 的 静态 资源 绥 
存 ， 但 有 时 候 在 移动 端 页 面 CSS 或 JavaScript 比 较 简 单 的 情况 下 为 了 减少 
请 求 ， 也 会 将 CSS 或 JavaScript 直 接 写 到 HTML 里 面 ， 具 体 要 根据 CSS 或 
JavaScript 文 件 的 大 小 和 业务 的 场景 来 分 析 。 如 果 CSS 或 JavaScript 文 件 内 
容 较 多 ， 业 务 逻 辑 较 复 杂 ， 建 议 放 到 外 部 文件 引入 。 





<link rel="stylesheet" href="//cdn.domain.com/path/main.css"> 


<script src="//cdn.domain.com/path/main.]js"></script> 


4. 避免 页 面 中 空 的 href 和 Src 


当 <link> 标 签 的 href 属 性 为 空 ， 或 <script>、<img>、<iframe> 标 签 的 
src 属性 为 衬 时 ， 浏 览 器 在 演 染 的 过 程 中 仍 会 将 href 属 性 或 src 属 性 中 的 衬 
内 容 进 行 加 载 ， 直 至 加 载 失 败 ， 这 样 惑 阻塞 了 页 面 中 其 他 资源 的 下 载 进 
程 ， 而 且 最 终 加 载 到 的 内 容 是 无 效 的 ， 因 此 要 尽量 避免 。 


<!- -不 推荐 - -> 
<img src="" alt="photo"> 


<a href=""> 点 击 链 接 </a> 
5. 为 HTML 指 定 Cache-Control 或 Expires 


为 HTML 内 容 设 置 Cache-Control 或 Expires 可 以 将 HTML 内 容 缓 存 起 
来 ， 避 人 免 频 繁 同 服务 器 端 发 送 请 求 。 前 面 讲 到 ， 在 页 面 Cache-Control 或 
Expires 头 部 有 效 时 ， 浏 览 器 将 直接 从 绥 存 中 读 取 内 容 ， 不 同 服务 器 端 发 
送 请 求 。 


<meta http-equiv="Cache-Control" content="max-age=7200" /> 


<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT 


6. 合理 设置 Etag 和 Last-Modified 





合理 设置 Etag 和 Last-Modified 使 用 浏览 器 缓存 ， 对 于 未 修改 的 文 
件 ， 静态 7 资源 服务 器 会 癌 浏 览 哈 # 病 返回 304， 让 浏 览 器 从 缓存 中 读 取 文 
件 ， 减 少 Web 资 源 下 载 的 带宽 消耗 并 降低 服务 絮 负 载 。 


<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 17:45: 


7. 减少 页 面 重 定 问 





页 面 每 次 重 定 同 都 会 延长 页 面 内 容 返 回 的 等 待 延 时 ， 一 次 重 定 同 大 


约 需要 600 坚 秒 的 时 间 开 销 ， 为 了 保证 用 户 尽 快 看 到 页 面 内 容 ， 要 尽量 
避免 页 面 重 定 问 。 


8. 使 用 静态 资源 分 域 存放 来 增加 下 载 并 行 数 


浏览 器 在 同一 时 刻 向 同一 个 域名 请 求 文 件 的 并 行 下 载 数 是 有 限 的 ， 
因此 可 以 利用 多 个 域名 的 主机 来 存放 不 同 的 静态 资源 ， 增 大 页 面 加 载 时 
资源 的 并 行 下 载 数 ， 缩 短 页 面 资 源 加 载 的 时 间 。 通 常 根据 多 个 域名 来 分 
别 存储 JavaScript、CSS 和 图 片 文件 。 


<link rel="stylesheet" href="//cdni.domain.com/path/main.css"> 


<script src="//cdn2.domain.com/path/main.js"></script> 


9. 使 用 静态 资源 CDN 来 存储 文件 





如 果 条 件 允 许 ， 可 以 利用 CDN 网 络 加 快 同一 个 地 理 区 域内 重复 静态 
资源 文件 的 啊 应 下 载 速 度 ， 缩 短 资源 请 求 时 间 。 


10. 使 用 CDN Combo 下 载 传输 内 容 


CDN Combo 是 在 CDN 服 务 嚣 端 将 多 个 文件 请 求 打 包 成 一 个 文件 的 
形式 来 返回 的 技术 ， 这 样 可 以 实现 HTTP 连 接 传输 的 一 次 性 复 用 ， 减 少 
浏览 器 的 HTTP 请 求 数 ， 加 快 资源 下 载 速 上 度 。 例 如 同一 个 域名 CDN 服 务 
器 上 的 a.js，b.js，c.js 束 可 以 按 如 下 方式 在 一 个 请 求 中 下 载 。 


<script src="//cdn.domain.com/path/a.js,b.js,c.js"></script> 


11. 使 用 可 缓存 的 AJAX 


对 于 返回 内 容 相 同 的 请 求 ， 没 必要 每 次 都 直接 从 服务 端 拉 取 ， 合 理 
使 用 AJAX 绥 存 能 加 快 AJAX 响 应 速度 并 减轻 服务 器 压力 。 





$.ajax({ 
url: url, 
type: 'get', 
cache: true, // 推荐 使 用 缓存 
data: {} 
success()t{ 
// ... 
}, 
error(){ 


LY ni 


}); 
12. 使 用 GET 来 完成 AJAX 请 求 


使 用 XMLHttpRequest 时 ， 浏 览 器 中 的 POST 方法 发 送 请 求 首 先 友 送 
文件 头 ， 然 后 发 送 HTTP 正 文 数据 。 而 使 用 GET 时 只 发 送 头 部 ， 所 以 在 
拉 取 服务 端 数 据 时 使 用 GET 请 求 效 率 更 高 。 





$.ajax({ 
url: url, 
type: 'get'， // 推荐 使 用 get 完成 请 求 
data: {} 


success(){ 


A 


儿 
error()t{ 


LL es 


}); 
13. 减少 Cookie 的 大 小 并 进行 Cookie 隔 离 


HTTP 请 求 通常 默认 带 上 浏览 器 端的 Cookie 一 起 发 送 给 服务 器 ， 所 
以 在 非 必 要 的 情况 下 ， 要 尽量 减少 Cookie 来 减 小 HTTP 请 求 的 大 小 。 对 
于 静态 资源 ， 尽 量 使 用 不 同 的 域名 来 存放 ， 因 为 Cookie 默 认 是 不 能 路 域 
的 ， 这 样 束 做 到 了 不 同 域名 下 静态 资源 请 求 的 Cookie 隔 离 。 








14. 缩小 favicon.ico 并 绥 存 


有 利于 favicon.ico 的 重复 加 载 ， 因 为 一 般 一 个 web 应 用 的 favicon.ico 
是 很 少 改 变 的 。 


15. 推荐 使 用 异步 JavaScript 资 源 


异步 的 JavaScript 资 源 不 会 阻塞 文档 解析 ， 所 以 允许 在 浏览 器 中 优先 
泻 染 页 面 ， 延 后 加 载 脚本 执行 。 例 如 JavaScript 的 引用 可 以 如 下 设置 ， 也 
可 以 使 用 模块 化 加 载 机 制 来 实现 。 


<script Src="main,js"” defer></script> 


<script src="main.]jJs" async></script> 


使 用 async 时 ， 加 载 和 泻 染 后 续 文 档 元 素 的 过 程 和 main.js 的 加 载 与 


执行 是 并 行 的 。 使 用 defer 时 ， 加 载 后 续 文 档 元 素 的 过 程 和 main.js 的 加 
载 是 并 行 的 ， 但 是 main.js 的 执行 要 在 页 面 所 有 元 素 解 析 完 成 之 后 才 开 
始 执行 。 


16. 消除 阻塞 泻 染 的 CSS 及 JavaScript 


对 于 页 面 中 加 载 时 间 过 长 的 CSS 或 JavaScript 文 件 ， 需 要 进行 合理 拆 
分 或 延 后 加 载 ， 保 证 关键 路 径 的 资源 能 快速 加 载 完成 。 


17. 避免 使 用 CSS import 引 用 加 载 CSS 


CSS 中 的 @import 可 以 从 另 一 个 样式 文件 中 引入 样式 ， 但 应 该 避免 
这 种 用 法 ， 因 为 这 样 会 增加 CSS 资 源 加 载 的 关键 路 径 长 度 ， 市 有 @ 
import 的 CSS 样 式 需 要 在 CSS 文 件 串 行 解析 到 @import 时 才 会 加 载 男 外 的 
CSS 文 件 ， 大 大 延 后 CSS 泻 染 完 成 的 时 间 。 








<!-- 不 推荐 --> 
<style> 
@import "path/main.css"; 


</style> 


<!-- 推荐 --> 


<link rel="stylesheet" href="//cdni.domain.com/path/main.css"> 


1. 把 CSS 资 源 引 用 放 到 HTMEL 文 件 顶部 


一 般 推荐 将 所 有 CSS 资 源 尽 早 指定 在 HTML 文 档 <head> 中 ， 这 样 浏 
览 器 可 以 优先 下 载 CSS 并 尽早 完成 页 面 演 染 。 





2. JavaScript 资 源 引 用 放 到 HTML 文 件 底 部 


JavaScript 资 源 放 到 HTML 文 档 底 部 可 以 防止 JavaScript 的 加 载 和 解析 
执行 对 页 面 泻 染 造成 阻塞 。 由 于 JavaScript 资 源 默认 是 解析 阻塞 的 ， 除 非 
被 标记 为 异步 或 者 通过 其 他 的 异步 方式 加 载 ， 人 否则 会 阻塞 HIML DOM 
解析 和 CSS 泻 染 的 过 程 。 


3. 不 要 在 HTML 中 直接 缩放 图 片 


在 HIML 中 和 直接 缩放 图 片 会 导致 页 面 内 容 的 重 排 重 绘 ， 此 时 可 能 会 
使 页 面 中 的 其 他 操作 产生 卡 顿 ， 因 此 要 尽量 减少 在 页 面 中 直接 进行 图 片 
缩放 。 





4. 减少 DOM 元 素数 量 和 深度 





HTML 中 标签 元 素 越 多 ， 标 签 的 层级 越 深 ,浏览 右 解 析 DOM 并 绘制 
到 浏览 器 中 所 花 的 时 间 就 越 长 ， 所 以 应 尽 可 能 保持 DOM 元 素 简 洁 和 层 
级 较 少 。 


<!-- 不 推荐 --> 
<div> 
<span> 


<a href="javascript: void(0);"> 





<img src="./path/photo.jpg"” alt=" 图 片 "> 
</a> 


</span> 


</div> 


<!-- 推荐 --> 





<img src="./path/photo.jpg"” alt=" 图 片 "> 


5. 尽量 避免 使 用 <table>、<iframe> 等 慢 元 素 





<table> 内 容 的 泻 染 是 将 table 的 DOM 泻 染 树 全 部 生成 完 并 一 次 性 绘 
制 到 页 面 上 的 ， 所 以 在 长 表格 泻 染 时 很 耗 性 能 ， 应 该 尽量 避免 使 用 它 ， 
可 以 考虑 使 用 列表 元 素 <ul> 人 代替。 尽量 使 用 异步 的 方式 动态 添加 
iframe， 因 为 iframe 内 资源 的 下 载 进程 会 阻塞 父 页 面 静 态 资源 的 下 载 与 
CSS 及 HTML DOM 的 解析 。 


6. 避免 运行 耗 时 的 JavaScript 


长 时 间 运 行 的 JavaScript 会 阻 窜 浏 览 器 构建 DOM 树 、DOM 演 染 树 、 
演 染 页 面 。 所 以 ， 任 何 与 页 面 初 次 演 染 无 关 的 逻辑 功能 都 应 该 延迟 加 载 
执行 ， 这 和 JavaScript 资 源 的 异步 加 载 思 路 是 一 致 的 。 


7. 避免 使 用 CSS 表 达 式 或 CSS 滤 镜 


CSS 表 达 式 或 CSS 滤 镜 的 解析 浓 染 速度 是 比较 慢 的 ， 在 有 其 他 解决 
方案 的 情况 下 应 该 尽量 避免 使 用 。 





// 不 推荐 
.Opacityt{ 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 


5.4.3 ”移动 端 浏览 右前 站 优化 策略 


相对 于 桌面 端 浏览 器 ， 移 动 端 Web 浏 览 器 上 有 一 些 较 为 明显 的 特 
点 : 设备 屏幕 较 小 、 新 特性 兼容 性 较 好 、 支 持 一 些 较 新 的 HTML5 和 和 
CSS3 特 性 、 需 要 与 Native 应 用 交互 等 。 但 移动 端 浏 览 器 可 用 的 CPU 计算 
资源 和 网 络 资源 极为 有 限 ， 因 此 要 做 好 移动 端 Web 上 的 优化 往往 需要 做 
更 多 的 事情 。 首 先 ， 在 移动 端 Web 的 前 端 页 面 泻 染 中 ， 桌 面 浏览 器 端 上 
的 优化 规则 同样 适用 ， 此 外 针对 移动 端 也 要 做 一 些 极致 的 优化 来 达到 更 
好 的 效果 。 需 要 注意 的 是 ， 并 不 是 移动 端的 优化 原则 在 桌面 浏览 器 端 就 
不 适用 ， 而 是 由 于 兼容 性 和 差异 性 的 原因 ， 一 些 优化 原则 在 移动 端 更 具 
代表 性 。 

















网 络 加 载 类 








1. 首 屏 数据 请 求 提前 ， 避 免 JavaScript 文 件 加 载 后 才 请 求 数 据 


为 了 进一步 提升 页 面 加 载 速度 ， 可 以 考虑 将 页 面 的 数据 请 求 尽 可 能 
提前 ， 避 免 在 JavaScript 加 载 完 成 后 才 去 请 求 数 据 。 通 常数 据 请 求 是 页 面 
内 容 演 染 中 关键 路 径 最 长 的 部 分 ， 而 且 不 能 并 行 ， 所 以 如 果 能 将 数据 请 
求 提 前 ， 可 以 极 大 程度 上 缩短 页 面 内 容 的 渲染 完成 时 间 。 




















2. 首 屏 加 载 和 按 需 加 载 ， 非 首 屏 内 容 深 屏 加 载 ， 保 证 首 屏 内 容 最 
小 化 


由 于 移动 端 网 络 速度 相对 较 慢 ， 网 络 资源 有 限 ， 因 此 为 了 尽快 完成 
页 面 内 容 的 加 载 ， 需 要 保证 首 屏 加 载 资源 最 小 化 ， 非 首 屏 内 容 使 用 滚动 
的 方式 异步 加 载 。 一 般 推 荐 移动 端 页 面 冯 屏 数 据 展 示 延 时 最 长 不 超过 3 








秒 。 目 前 中 国联 通 3G 的 网 络 速度 为 338KB/s 〈2.71Mb/s) ， 所 以 推荐 首 
屏 所 有 资源 大 小 不 超过 1014KB， 即 大 约 不 超过 1MB。 
3. 模块 化 资源 并 行 下 载 


在 移动 端 资源 加 载 中 ， 尽 量 保 证 JavaScript 资 源 并 行 加 载 ， 主 要 指 的 
是 模块 化 JavaScript 资 源 的 异步 加 载 ， 例 如 AMD 的 异步 模块 ， 使 用 并 行 
的 加 载 方式 能 够 缩短 多 个 文件 资源 的 加 载 时 间 。 


4. inline 首 屏 必 备 的 CSS 和 JavaScript 


i 
吊 
面 泻 染 时 必 备 的 CSS 和 JavaScript 通 过 <script> 或 <style> 内 联 到 页 面 


通 第 为 了 在 HTML 加 载 完 成 时 能 使 浏览 器 中 有 基本 的 样式 ， 需 要 将 
家 
避免 页 面 HIML 载 入 完成 到 页 面 内 容 展示 这 段 过 程 中 页 面 出 现 衬 








页 
中 ， 
Fle 
<!IDOCTYPE html> 
<htm] lang="en"> 
<head> 


<meta charset="UTF-8"> 


<title> 样 例 </title> 





<meta name="viewport" content="width=device-width,minimum-sca 
maximum-scale=1.0,user-scalable=no"> 
<style> 
/* 必 备 的 首 屏 CSS */ 
html, bodyt{ 
margin: 0; 


padding: 0; 


background-color: #ccc; 
} 
</style> 
</head> 
<body> 
</body> 
</html> 


5. meta dns prefetch 设 置 DNS 预 解析 





设置 文件 资源 的 DNS 预 解析 ， 让 浏览 器 提前 解析 获取 静态 资源 的 主 
机 IP， 避 人 免 等 到 请 求 时 才 发 起 DNS 解 析 请 求 。 通 常 在 移动 端 HTML 中 可 
以 采用 如 下 方式 完成 。 
<!-- cdn 域 名 预 解析 - -> 
<meta http-equiv="x-dns-prefetch-control" content="on"> 


<link rel="dns-prefetch" href="//cdn.domain.com"> 


6. 资源 预 加 载 








对 于 移动 端 首 屏 加 载 后 可 能 会 被 使 用 的 资源 ， 需 要 在 首 屏 完成 加 载 
后 尽快 进行 加 载 ， 保 证 在 用 户 需要 浏览 时 已 经 加 载 完 成 ， 这 时 候 如 采 再 


去 异步 请 求 就 显得 很 慢 。 








7. 合理 利用 MTU 策 略 


通 弟 情况 下 ， 我 们 认为 TCP 网 络 传输 的 最 大 传输 单元 〈Maximum 
Transmission Unit，MTU ) 为 1500B， 即 一 个 RTT (Round-Trip Time， 
网 络 请 求 往 返 时 间 ) 内 可 以 传输 的 数据 量 最 大 为 1500 字 节 。 因 此 ， 在 前 











后 端 分 离 的 开发 模式 中 ， 尽 量 保证 页 面 的 HTML 内 容 在 1KB 以 内 ， 这 样 
整个 HTML 的 内 容 请 求 就 可 以 在 一 个 RTT 内 请 求 完 成 ， 最 大 限度 地 提高 
HTML 载 入 速度 。 





1. 合理 利用 浏览 右 绥 存 


除了 上 面 说 到 的 使 用 Cache-Control、Expires、Etag 和 Last-Modified 
来 设置 HITP 绥 存 外 ， 在 移动 端 还 可 以 使 用 localStorage 等 来 保存 AJAX 返 
回 的 数据 ， 或 者 使 用 localStorage 保 存 CSS 或 JavaScript 静 态 资源 内 容 ， 实 
现 移动 端的 离线 应 用 ， 尽 可 能 减少 网 络 请 求 ， 保 证 静态 资源 内 容 的 快速 
加 载 。 





2. 静态 资源 离线 方案 

对 于 移动 器 或 Hybrid 应 用 ， 可 以 设置 离线 文件 或 离线 包机 制 让 静态 
资源 请 求 从 本 地 读 取 ， 加 快 资源 载 入 速度 ， 并 实现 离线 更 新 。 关 于 这 块 
内 容 ， 我 们 会 在 后 面 的 章节 中 重点 讲解 。 





3. 尝试 使 用 AMP HTML 


AMP HTML 可 以 作为 优化 前 端 页 面 性 能 的 一 个 解决 方案 ， 使 用 
AMP Component 中 的 元 系 来 代 蔡 原始 的 页 面 元 陛 进 行 直 接 泻 染 。 





<!-- 不 推荐 --> 
<video width="400" height="300" src="http://www.domain.com/vid 


poster="path/poster.jpg"> 


<div fallback> 
<p>Your browser doesn’t support HTML5 video</p> 
</div> 
<source type="video/mp4" src="foo.mp4"> 
<source type="video/webm" src="foo.webm"> 


</video> 


<!-- 推荐 --> 
<amp-video width="400" height="300" src="http://www.domain.com/vi 
"path/poster.jpg"> 

<div fallback> 

<p>Your browser doesn’t support HTML5 video</p> 

</div> 

<source type="video/mp4" src="foo.mp4"> 

<source type="video/webm" src="foo.webm"> 


</amp-video> 


图 片 类 


1. 图 片 压缩 处 理 





在 移动 器， 通 利 要 保证 页 面 中 一 切 用 到 的 图 片 都 是 经 过 压缩 优化 处 
理 的 ， 而 不 是 以 原 图 的 形式 直接 使 用 的 ， 因 为 那样 很 消耗 流量 ， 而 且 加 
载 时 间 更 长 。 





2. 使 用 较 小 的 图 片 ， 合 理 使 用 base64 内 髓 图 厂 





在 页 面 使 用 的 背景 图 片 不 多 且 较 小 的 情况 下 ， 可 以 将 图 片 转化 成 
base64 编 码 嵌 入 到 HTML 页 面 或 CSS 文 件 中 ， 这 样 可 以 减少 页 面 的 HTTP 
请 求 数 。 需 要 注意 的 是 ， 要 保证 图 片 较 小 ， 一 般 图 片 大 小 超过 2KB 束 不 
推荐 使 用 base64 肉 入 显示 了 。 








.Class-name { 

background-image: 
url('data:image/png;base64,iVBORwOKGgOAAAANSUNEUgAAAAoAAAALCAMAAA 
USyQukxQudwQyZzvgyhxAyfwgyxzASsSUHQGOUAOaJAERGAFIXwSTugyEqgtqhghQzgU 
Cowp2kQlLlheghTbQzHwQU7SwvVAVgQ6TgQLLwMeKwFOemyQAAAAVE1EQVQI1y3JVRaA 
DIQQNBAAFE10iKig3SLRNN4SP/p+NO8VCOYNfIlNWtqIkhg/TPYbCvhqdHAWRXPZS 
QAaAAAAAEl1FTkSuQMCC' ) ; 


} 
3. 使 用 更 高 压缩 比 格式 的 图 片 


使 用 具有 较 高 压缩 比 格 式 的 图 片 ， 如 webp 等 。 在 同等 图 片 画 质 的 情 
况 下 ， 高 压缩 比 格 式 的 图 片 体积 更 小 ， 能 够 更 快 完成 文件 传输 ， 节 和 省 网 


络 流量 。 





<img src="//cdn.domain.com/path/photo.webp" alt="webp 格 式 图 片 "> 


4. 图 片 懒 加 载 


为 了 保证 页 面 内 容 的 最 小 化 ， 加 速 页 面 的 泻 染 ， 尺 可 能 市 省 移动 站 
网 络 流量 ， 页 面 中 的 图 片 资 源 推荐 使 用 懒 加 载 实 现 ， 在 页 面 滚动 时 动态 
载 入 图 片 。 





<img data-src="//cdn.domain.com/path/photo.jpg"” alt=" 懒 加 载 图 片 "> 





5. 使 用 Media Query 或 srcset 根 据 不 同 屏 幕 加 载 不 同 大 小 图 片 





在 介绍 啊 应 式 的 章节 中 我 们 了 解 到 ， 针 对 不 同 的 移动 端 屏幕 太 寸 和 
分 辨 率 ， 输 出 不 同 大 小 的 图 片 或 背景 图 能 保证 在 用 户 体验 不 降低 的 前 提 
下 节省 网 络 流量 ， 加 快 部 分 机 型 的 图 片 加 载 速度 ， 这 在 移动 端 非 常 值得 
推荐 。 


6. 使 用 iconfont 代 蔡 图 片 图 标 


在 页 面 中 尽 可 能 使 用 iconfont 来 代 蔡 图 片 图 标 ， 这 样 做 的 好 处 有 以 
下 几 个 : 使 用 iconfont 体 积 较 小 ， 而 且 是 矢量 图 ， 因 此 缩放 时 不 会 失 
真 ; 可 以 方便 地 修改 图 片 大 小 尺寸 和 呈现 颜色 。 但 是 需要 注意 的 是 ， 
iconfont 引 用 不 同 webfont 格 式 时 的 兼容 性 写法 ， a 照 
以 下 顺 友 书写， 否则 不 容易 兼容 到 所 有 的 浏览 器 








@font-face { 
font-family: iconfont; 
src: url("./iconfont.eot"); 
src: url("./iconfont.eot?#iefix") format("eot"), 
url("./iconfont.woff") format("woff"), 


url("./iconfont.ttf") format("truetype"); 


7. 定义 图 片 大 小 限制 


加 载 的 单 张 图 片 一 般 建议 不 超过 30KB， 避 免 大 图 片 加 载 时 间 长 而 
了 咀 窒 页面 其 他 资源 的 下 载 ， 因 此 推荐 在 10KB 以 内 。 如 果 用 户 上 传 的 图 
片 过 大 ， 建 议 设置 告警 系统 ， 帮 助 我 们 观察 了 解 整个 网 站 的 图 片 流量 情 
况 ， 做 出 进一步 的 改善 。 


脚本 类 
1. 尽量 使 用 id 选择 喜 
选择 页 面 DOM 元 素 时 尽量 使 用 id 选择 器 ， 因 为 id 选择 器 速度 最 快 。 


2. 合理 缓存 DOM 对 象 





对 于 需要 重复 使 用 的 DOM 对 象 ， 要 优先 设置 缓存 变量 ， 避 人 免 每 次 
使 用 时 都 要 从 整个 DOM 树 中 重新 查找 。 





// 不 推荐 
$('#mod ,active').remove( 'active ' ) 


$('#mod ,not-active').addClass('active ' ) ， 


// 推荐 
let $mod = $('#mod"'); 
$mod.find('.active').remove('active'); 


$mod.find('.not-active').addClass('active'); 








3. 页 面 元 系 尽 量 使 用 事件 代理 ， 避 免 直 接 事 件 绑 定 


使 用 事件 代理 可 以 避免 对 每 个 元 系 痢 进行 绑 定 ， 并 且 可 以 避免 出 现 
内 存 泄露 及 需要 动态 添加 元 系 的 事件 绑 定 问题 ， 所 以 尽量 不 要 直接 使 用 
事件 绑 定 。 





// 不 推荐 
$('.btn').on('click', function(e)t{ 


console.1log(this); 


}); 

// 推荐 

$('body').on('click', '.btn', function(e)t{ 
console.1log(this); 


}); 


4. 使 用 touchstart 人 代替 dlick 





由 于 移动 端 屏幕 的 设计 ，touchstart 事 件 和 click 事 件 触 发 时 间 之 间 存 
在 300 晕 秒 的 延 时 ， 所 以 在 页 面 中 没有 实现 touchmove 滚 动 处 理 的 情况 
下 ， 可 以 使 用 touchstart 事 件 来 代 丛 元 素 的 click 事 件 ， 加 快 页 面 点 击 的 啊 
应 速度 ， 提 高 用 户 体验 。 但 同时 我 们 也 要 注意 页 面 重 登 元 素 touch 动 作 
的 点 击 罕 透 问题 。 








// 不 推荐 
$('body ' ) .on(' click'， '.btn', function(e)t{ 
console.1log(this); 


}); 


// 推荐 
$('body').on('touchstart', '.btn', function(e)t{ 


console.1log(this); 


}); 


5。 避免 touchmove、scroll 连 续 事 件 处 理 





需要 对 touchmove、scroll 这 类 可 能 连续 触发 回调 的 事件 设置 事件 节 
流 ， 例 如 设置 每 隔 16ms 〈60 帧 的 帧 间隔 为 16.7ms， 因 此 可 以 合理 地 设置 


为 16ms) 才 进 行 一 次 事件 处 理 ， 避 免 频 壹 的 事件 调用 导致 移动 端 页 面 卡 
顿 。 


// 不 推荐 
$('.scroller').on('touchmove', '.btn', function(e)t 
console.1log(this); 


}); 


// 推荐 
$('.scroller').on('touchmove', '.btn', function(e)t{ 
let self = this; 
setTimeout(function(){ 
console.1log(self); 
}, 16),; 
}); 


6. 避免 使 用 eval、with， 使 用 join 代 蔡 连接 符 十 ， 推 荐 使 用 
ECMAScript 6 的 字符 串 模板 


这 些 都 是 一 些 基础 的 安全 脚本 编写 问题 ， 尽 可 能 使 用 较 高 效率 的 特 
性 来 完成 这 些 操 作 ， 避 免 不 规范 或 不 安全 的 写法 。 

7. 尽量 使 用 ECMAScript 6 十 的 特性 来 编程 

ECMAScript 6 十 一 定 程 度 上 更 加 安全 高 效 ， 而 且 部 分 特性 执行 速度 
更 快 ， 也 是 未 来 规范 的 需要 ， 所 以 推荐 使 用 ECMAScript 6 十 的 新 特性 来 
完成 后 面 的 开发 。 


泻 3 


染 关 


Nun 


1. 使 用 Viewport 固 定 屏 幕 泻 染 ， 可 以 加 速 页 面 演 染 内 容 


一 般 认 为 ， 在 移动 端 设置 Viewport 可 以 加 速 页 面 的 演 染 ， 同 时 可 以 
避免 缩放 导致 页 面 重 排 重 绘 。 在 移动 端 固定 Viewport 设 置 的 方法 如 下 。 
<!-- 设置 viewport 不 缩放 --> 
<meta name="viewport" content="width=device-width, initial-scale= 


user-scalable=no"> 


2. 避免 各 种 形式 重 排 重 绘 





页 面 的 重 排 重 绘 很 耗 性 能 ， 所 以 一 定 要 尽 可 能 减少 页 面 的 重 排 重 
绘 ， 例 如 页 面 图 片 大 小 变化 、 元 素 位 置 变 化 等 这 些 情 况 都 会 导致 重 排 重 


绘 。 





3. 使 用 CSS3 动 画 ， 开 局 GPU 加 速 


使 用 CSS3 动 画 时 可 以 设置 transform: translateZ (0) 来 开启 移动 设备 浏 
览 器 的 GPU 网 形 处 理 加 速 ， 让 动画 过 程 更 加 流畅 。 


-webkit-transform: translatez(0); 
-ms-transform: translatez(0); 
-0-transform: translatez(0); 


transform: translatez(0); 


4. 合理 使 用 Canvas 和 requestAnimationFrame 








选择 Canvas 或 requestAnimationFrame 等 更 高 效 的 动画 实现 方式 ， 尽 


量 避 免 使 用 setTimeout、setInterval 等 方式 来 直接 处 理 连续 动画 。 
5. SVG 代替 图 片 


部 分 情况 下 可 以 考虑 使 用 SVG 代 蔡 图 片 实现 动画 ， 因 为 使 用 SVG 格 
式 内 容 更 小 ， 而 且 SVG DOM 结 构 方 便 调 整 。 


6. 不 所 用 float 


在 DOM 演 染 树 生成 后 的 布局 泻 染 阶段 ， 使 用 float 的 元 素 布局 计算 比 
较 耗 性 能 ， 所 以 尽量 减少 float 的 使 用 ， 推 荐 使 用 固定 布局 或 flex-box 弹 
性 布局 的 方式 来 实现 页 面 元 素 布 局 。 














7. 不 滥用 web 字 体 或 过 多 font-size 声 明 


过 多 的 font-size 声 明 会 增加 字体 的 大 小 计算 ， 而 且 也 没有 必要 的 。 


架构 协议 类 


1. 尝试 使 用 SPDY 和 HTTP 2 


在 条 件 允 许 的 情况 下 可 以 考虑 使 用 SPDY 协 议 来 进行 文件 资源 传 
输 ， 利 用 连接 复 用 加 快 传输 过 程 ， 缩 短 资源 加 载 时 间 。HTITP ”2 在 未 来 
也 是 可 以 考虑 尝试 的 。 


2. 使 用 后 端 数据 洽 染 


使 用 后 端 数据 演 染 的 方式 可 以 加 快 页 面 凡 容 的 演 当 展示， 避免 空 日 
页 面 的 出 现 ， 同 时 可 以 解决 移动 端 页 面 SEO 的 问题 。 如 果 条 件 多 许 ， 后 
端 数据 泻 染 是 一 个 很 不 错 的 实践 思路 。 后 面 的 章节 会 详细 介绍 后 端 数据 








演 染 的 相关 内 容 。 
3. 使 用 Native View 代 替 DOM 的 性 能 劣势 


可 以 尝试 使 用 Native View 的 MNV 关 开发 模式 来 避免 HTML DOM 性 
能 慢 的 问题 ， 目 前 使 用 MNVx 的 开发 模式 已 经 可 以 将 页 面 内 容 泻 染 体 
验 做 到 接近 客户 端 Native 应 用 的 体验 了 。 


关于 页 面 优化 的 常用 技术 手段 和 思路 主要 包括 以 上 这 些 ， 尽 管 列 举 
出 很 多 ， 但 仍 可 能 有 少数 遗漏 ， 可 见 前 问 性 能 优化 不 是 一 件 简 简单 单 的 
事情 ， 其 涉及 的 内 容 很 多 。 大 家 可 以 根据 实际 情况 将 这 些 方法 应 用 到 自 
己 的 项 目 当 中 ， 要 想 全 部 做 到 几乎 是 不 可 能 的 ， 但 做 到 用 户 可 接受 的 原 
则 还 是 很 容易 实现 的 。 











世界 上 没有 十 全 十 美的 事情 ， 在 我 们 做 到 了 极致 优化 的 同时 也 付出 
了 很 大 的 代价 ， 这 也 是 前 端 优化 的 一 个 问题 。 理 论 上 这 些 优化 都 是 可 以 
实现 的 ， 但 是 作为 工程 师 我 们 也 要 明白 懂得 权衡 。 优 化 提升 了 用 户 体 
验 ， 使 数据 加 载 更 快 ， 但 是 项 目 代码 却 可 能 打 乱 ， 寞 步 内 容 要 拆 分 出 
来 ， 首 屏 的 一 个 雪 丰 图 可 能 要 分 成 两 个 ， 页 面 项 目 代码 维护 成 本 成 倍增 
加 ， 项 目 结构 也 可 能 变 得 混乱 。 所 以 前 期 在 设计 构建 、 组 件 的 解决 方案 
时 要 解决 好 异步 的 自动 处 理 问题 。 任 何 一 部 分 优化 都 可 以 做 得 很 深入 ， 
但 不 一 定 都 值得 ， 在 优化 的 同时 也 要 尽量 考虑 性 价 比 ， 这 才 是 我 们 作为 
一 名 前 端 工 程 师 处 理 前 问 优 化 时 应 该 具有 的 正确 思维 。 














5.5 前 痕 用 户 数 据 分 析 


在 现代 互联 网 产品 的 开发 迭代 中 ， 对 前 并 用 户 数据 的 统计 分 析 严 重 
影响 着 最 终 产 品 的 成 败 。 谈 到 前 端 数 据 ， 涉 及 的 方面 就 比较 广 了 。 网 站 
用 户 数 据 统计 分 析 通 常 可 以 反映 出 网 站 的 用 户 规模 、 用 户 使 用 习惯 、 用 
户 的 内 容 偏 好 等 ， 了 解 了 这 些 束 能 帮助 我 们 调整 产品 全 略 、 改 进 产 品 雷 
求 、 提 高 产品 质量 ， 除 此 之 外 用 户 数 据 的 统计 甚至 也 会 直接 和 广告 收入 
相关 联 ， 那 么 这 一 节 我 们 惑 来 总 结 一 下 与 前 端 用 户 数据 相关 的 内 容 。 

















5.5.1 用户 访问 统计 


先 来 看 看 用 户 的 访问 统计 ， 通 常 页 面 上 用 户 访问 统计 主要 包括 
PV (Page View) 、UV (Unique Visitor) 、VV (Visit View) 、IP〈( 访 
问 站 点 的 不 同 IP 数 〉 每 。 PV 一般 指 在 一 天 时 间 之 内 页 面 被 所 有 用 户 访 问 
的 总 次 数 ， 即 每 一 次 页 面 刷新 都 会 增加 一 次 PV; UV 是 指 在 一 天 时 间 之 
访问 内 页 的 不 同 用 户 个 数 ， 和 PV 不 同 的 是 ， 如 果 一 个 页 面 在 同一 天 内 
被 某 个 相同 用 户 多 次 访问 ， 只 计算 一 次 UV; VV 是 统计 网 站 人 补 用 户 访 问 
次 数 的 参考 数据 ， 通 常用 户 从 进入 网 站 到 最 终 离开 该 网 站 的 整个 过 程 只 
算 一 次 VV; IP 则 表示 一 天 时 间 之 内 访问 网 站 的 不 重复 IP 数 ， 一 天 时 间 
内 相同 IP 地 址 多 次 访问 同一 个 网 站 只 计算 一 次 。 




















PV 


PV 作为 单个 页 面 的 统计 量 参数 ， 通 第 用 来 统计 获取 关键 入 口 页 面 
或 临时 推广 性 页 面 的 访问 量 或 推广 效果 ， 由 于 PV 的 统计 一 般 是 不 做 任 
何 条 件 限制 的 ， 可 以 人 为 地 刷新 来 提升 统计 量 ， 所 以 单纯 靠 PV 是 无 法 
反应 页 面 被 用 户 访问 的 具体 情况 的 。 


UV 


UV 则 可 以 认为 是 前 端 页 面 统 计 中 一 个 最 有 价值 的 统计 指标 ， 因 为 
其 直接 反应 页 面 的 访问 用 户 数 。 目 前 有 较 多 站 点 的 UV 是 按照 一 天 之 内 
访问 目标 页 面 的 IP 数 来 计算 的 ， 因 此 我 们 也 可 以 根据 UV 来 统计 站 点 的 
周 活跃 用 户 量 和 月 活跃 用 户 量 。 严 格 来 讲 ， 根 据 一 天 时 间 内 访问 目标 员 
面 的 人 P 数 来 计算 UV 是 不 严 座 的 ， 因 为 在 办 公 区 或 校园 局 域 网 的 情况 
下 ， 多 个 用 户 访 问 互联 网 网 站 的 人 P 可 能 是 同一 个 ， 但 实际 上 的 访问 用 户 
却 有 很 多 。 所 以 为 了 得 到 更 加 准确 的 结果 ， 除 了 根据 耻 ， 还 需要 结合 其 
他 的 辅助 信息 来 识别 统计 不 同 用 尸 的 UV， 这 里 介绍 两 种 常用 的 方式 。 











o 根据 浏览 器 Cookie 和 了 P 统 计 。 在 目标 页 面 每 次 打开 时 向 浏览 器 
中 写 入 唯一 的 某 个 Cookie 信 息 ， 再 结合 IP 一 起 上 报 统计 ， 就 可 
以 精确 统计 出 一 天 时 间 内 访问 页 面 的 用 户 数 。 存 在 的 问题 是 ， 
如 果 用 户 手 动 清除 了 Cookie 再 进入 访问 ， 页 面 被 重新 访问 时 就 
只 能 算 第 二 次 。 











o ”结合 用 户 浏 览 器 标识 userAgent 和 IP 统 计 。 由 于 使 用 Cookie 统 计 
存在 可 能 被 手动 清除 的 问题 ， 所 以 推荐 结合 浏览 器 标识 
userAgent 来 统计 。 这 样 可 以 在 一 定 程度 上 区 分 同 IP 下 的 不 同 用 
户 ， 但 也 不 完全 准确 ，IP 和 浏览 器 标识 userAgent 相 同 的 情况 也 
很 常见 ， 但 仍 却 只 能 计算 一 次 。 











由 此 可 见 ， 虽然 UV 是 网 站 统计 的 一 个 很 重要 的 统计 量 ， 但 一 般 情 
况 下 是 无 法 用 于 精确 统计 的 ， 所 以 通常 需要 结合 PV、UV 来 一 起 分 析 网 
站 被 用 户 访问 的 情况 。 此 外 ， 我 们 还 可 以 对 站 点 一 天 的 新 访客 数 、 新 访 
客 比率 等 进行 统计 ， 计 算 第 一 次 访问 网 站 的 新 用 户 数 和 比例 ， 这 对 判断 
网 站 用 户 增长 也 是 很 有 意义 的 。 





VV 


PV 和 UV 更 多 是 针对 单 页 面 进行 的 统计 ， 而 VV 则 是 用 户 访 问 整 个 网 
站 的 统计 指标 。 例 如 用 户 打开 站 点 ， 并 在 内 部 做 了 多 次 跳 转 操 作 ， 最 后 
关闭 该 网 站 所 有 的 页 面 ， 即 为 一 次 VV。 


IP 


IP 是 一 天 时 间 内 访问 网 页 或 网 站 的 独 六 IP 数 ， 一 般 服 务 器 端 可 以 直 
接 获 取 用 户 访问 网 站 时 的 独立 IP， 统 计 也 比较 容易 处 理 。 需 要 注意 的 
是 ， 我 们 要 理解 IP 统 计 与 UV 统计 的 区 别 和 联系 。 


5.5.2 用户 行为 分 析 


对 于 较 小 的 项 目 团队 来 说 ， 或 许 得 到 页 面 或 网 站 的 PV、UV、VV、 
IP 这 些 基 本 的 统计 数据 就 可 以 了 。 其 实 不 然 ， 相 对 于 访问 量 的 统计 ， 用 
户 行为 分 析 才 是 更 加 直接 反映 网 页 内 容 是 否 受用 户 喜 欢 或 满足 用 户 需 求 
的 一 个 重要 标准 ， 用 户 在 页 面 上 操作 的 行为 有 很 多 种 ， 每 种 操作 都 可 能 
对 应 页 面 上 不 同 的 展示 内 容 。 如 果 我 们 能 知道 用 户 浏览 目标 页 面 时 所 有 








的 行为 操作 ， 一 定 程度 上 就 可 以 知道 用 户 对 页 面 的 哪些 内 容 感 兴趣 ， 对 
哪些 内 容 不 感 兴趣 ， 这 对 产品 内 容 的 调整 和 改进 是 很 有 意义 的 。 一 般 用 
于 分 析 用 户 行为 的 参数 指标 主要 包括 : 页 面 点 击 量 、 用 户 点 击 流 、 用 户 
访问 路 径 、 用 户 点 击 热力 图 、 用 户 转 换 率 、 用 户 访问 时 长 分 机 和 用 户 访 
问 内 容 分 析 等 ， 下 面 我 们 来 逐一 分 析 。 





页 面皮 击 量 











页 面 点 击 量 用 来 统计 用 户 对 于 页 面条 个 可 后 击 或 可 操作 区 域 的 反击 
或 操作 次 数 。 以 点 击 的 情况 为 例 ， 统 计 页 面 上 某 个 按钮 被 点 击 的 次 数 惑 
可 以 通过 该 方法 来 计算 ， 这 样 通 过 统计 的 结果 可 以 分 析出 页 面 上 哪些 按 
钮 对 应 的 内 容 是 用 户 可 能 感 兴趣 的 。 


用 户 操 击 流 分 析 


点 击 流 用 来 统计 用 户 在 页 面 中 发 生 点 击 或 操作 动作 的 顺序 ， 可 以 反 
映 用 户 在 页 面 上 的 操作 行为 。 所 以 统计 上 报时 需要 在 浏览 器 上 先 保存 记 
录用 户 的 操作 顺序 ， 例 如 在 关键 的 按钮 中 埋 点 ， 点 击 时 间 ]ocalStorage 中 
记录 点 击 或 操作 行为 的 唯一 id， 在 用 户 一 次 VV 结束 或 在 下 一 次 VV 开始 
时 进行 点 击 流 上 报 ， 然 后 通过 后 台 归 并 统计 分 析 。 





用 户 访 问 路 径 分 析 





用 户 访问 路 径 和 用 户 点 击 流 有 点 类 似 ， 不 过 用 户 访问 路 径 不 针对 用 
户 的 可 点 击 或 操作 区 域 埋 点 ， 而 是 针对 每 个 页 面 埋 点 记录 用 户 访问 不 同 








页 面 的 路 径 。 上 报信 息 的 方法 和 用 户 点 击 流 上 报 相 同 ， 和 常常 也 是 在 一 次 
VV 结束 或 下 一 次 VV 开始 时 上 报 用 户 的 访问 路 径 。 


以 图 5-6 所 示 的 某 电影 票 的 购买 流程 为 例 ， 页 面 首页 、 列 表 页 、 详 
情 页 、 影 评 页 、 购 票 页 、 购 票 完 成 页 对 应 的 埋 点 标识 分 别 为 A、B、C、 
D、E、F， 某 用 户 进 入 首页 后 选择 最 近 上 映 的 电影 列表 ， 查 看 某 个 电影 

介绍 和 影评 ， 然 后 选择 购 票 ， 购 票 成 功 后 又 返回 首页 并 退出 ， 那 么 我 们 
可 以 记录 该 用 户 这 次 VV 的 访问 路 径 为 A-B-C-D-E-F-A， 将 该 路 径 存 入 
localStorage 中 ， 在 VV 结束 前 或 下 一 次 VV 开始 时 将 用 户 访 问 路 径 字 符 串 
上 报到 服务 器 。 再 结合 点 击 流 路 人 笃 ， 束 可 以 基本 分 析出 用 户 这 次 访问 过 
程 中 所 有 点 击 的 操作 和 访问 的 页 面 路 径 了 。 





























图 5-6 用户 点 击 购 票 流 程 











用 户 点 击 热力 图 


用 户 点 击 热力 图 是 为 了 统计 用 户 的 点 击 或 操作 发 生 在 整个 页 面 哪些 


区 域 位 置 的 一 种 分 析 方法 ， 一 般 是 统计 用 户 操 作 习 惯 和 页 面 茶 些 区 域内 
容 是 否 受 用 户 关注 的 一 种 方式 。 图 5-7 为 google 某 个 关键 词 的 用 户 点 击 搜 
索 结 果 热 力图 ， 从 图 中 可 以 分 析出 ， 搜 索 结 果 中 左上 方 的 结果 更 容易 家 
用 户 点 击 ， 所 以 这 些 地 方 的 搜索 结果 通 币 是 更 具有 价值 的 。 








图 5-7 页 面 点 击 热 力图 示例 





这 种 统计 方法 获取 上 报 点 的 方式 主要 是 捕获 鼠标 事件 在 屏幕 中 的 坐 
标 位 置 进 行 上 报 ， 然 后 在 服务 端 进行 计算 归 类 分 析 并 绘图 。 通 过 如 下 代 
码 可 以 简单 地 获取 点 击 事件 在 页 面 中 的 位 置 并 进行 上 报 。 


$(document).on('click', 'body', function(e)t 


report(e.pageX, e.pageY); // e.pageX 和 pageY 为 相对 于 整个 页 面 的 
}); 


用 户 转化 率 与 导 流 转化 率 





对 用 户 转 化 率 的 分 析 一 般 在 一 些 临 时 推广 页 面 或 拉 取 新 用 尸 宣传 页 
面 上 比较 党 用， 这 里 统计 也 很 简单 ， 例 如 要 统计 某 个 新 产品 推广 页 面 的 
用 户 转 化 率 ， 通 过 计算 经 过 该 页 面 注册 的 用 户 数 相对 于 页 面 的 PV 比例 
就 可 以 得 出 。 





用 户 转化 率 三 通过 该 页 面 注册 的 用 户 数 /页面 PV 


相对 来 说 ， 用 户 转 化 率 分 析 的 应 用 场景 比较 单一 。 还 有 为 一 种 导 流 
的 页 面 统 计 分 析 和 该 页 面 的 功能 类 似 ， 不 过 其 作用 是 将 茶 个 页 面 的 用 户 
访问 流量 引导 到 为 一 个 页 面 中 ， 导 流转 化 率 可 以 用 通过 源 页 面 导入 的 页 
面 访 问 PV 相 对 于 源 页 面 的 总 PV 比 例 来 表示 。 








导 流 转化 率 三 通过 源 页 面 导入 的 页 面 访 问 PV / 源 页 面 PV 





本 质 上 ， 关 键 的 统计 分 析 仍 是 对 现 有 页 面 访问 量 进行 对 比 和 计算 而 
得 出 的 ， 并 不 是 统计 出 来 的 。 


用 户 访问 时 长 、 内 容 分 析 


用 户 访问 时 长 和 扩容 分 析 则 是 统计 分 析 用 户 在 茶 些 关键 内 容 页 面 的 
停留 时 间 ， 来 判断 用 户 对 该 页 面 的 内 容 是 否 感 兴趣 ， 从 而 分 析出 用 户 对 
网 站 可 能 感 兴趣 的 内 容 ， 方 便 以 后 精确 地 向 该 用 户 推荐 他 们 感 兴趣 的 内 


SN 


合 。 


5.5.3 前 中 日 专 上 报 








接触 过 后 端 开 发 的 人 可 能 知道 ， 一 般 在 程序 运行 出 现 异常 时 可 以 通 
过 写 服务 器 日 志 的 方式 来 记录 错误 的 信息 ， 然 后 下 载 服 务 器 日 志 打 开 碍 
看 是 哪里 的 问题 并 进行 修复 。 看 似 完 美 ， 但 是 如 果 是 前 端 页 面 运行 出 现 
了 了 问题， 我 们 却 不 能 打开 用 户 浏览 费 的 控制 台 记 录 来 伍 看 代码 中 到 底 出 
现 了 什么 错误 。 




















一 般 情况 下 ， 在 前 端 开 发 中 ， 前 并 工程 师 按 照 需 求 完 成 页 面 开发 ， 
通过 产品 体验 确认 和 测试 ， 页 面 就 可 以 上 线 了 。 但 不 牌 的 是 ， 产 品 很 快 
就 收 到 了 用 户 的 投诉 。 用 户 反映 页 面 点 击 按钮 没 反 应 而 且 能 复 现 ， 我 们 
试 了 一 下 却 一 切 正 币 ， 于 是 退 问 用 户 所 用 的 环境 ， 最 后 结论 是 用 户 使 用 
了 一 个 非常 小 众 的 浏览 器 打开 页 面 ， 因 为 该 浏览 喜 不 文 持 某 个 特性 ， 因 
此 页 面 报错 ， 整 个 页 面 停止 响应 。 在 这 种 情况 下 ， 用 户 反馈 的 投诉 花 掉 
了 我 们 很 多 时 间 去 定位 问题 ， 然 而 这 并 不 是 最 可 怕 的 ， 更 让 我 们 担忧 的 
是 更 多 的 用 户 过 到 这 种 场景 后 便 会 直接 抛弃 这 个 有 问题 的 “垃圾 产品 ”。 
这 个 问题 唯一 的 解决 办 法 就 是 在 尽量 少 的 用 户 遇 到 这 样 的 场景 时 就 把 问 
题 即时 修复 掉 ， 保 证 尽量 多 的 用 户 可 以 正常 使 用 。 首 先 我 们 需要 在 少数 
用 户 使 用 产品 出 错时 知道 有 用 户 出 错 ， 而 且 尽 量 定位 到 是 什么 错误 。 由 
于 用 户 的 运行 环境 是 在 浏览 器 端的 ， 因 此 可 以 在 前 端 页 面 脚本 执行 出 错 
时 将 错误 信息 上 传 到 服务 器 ， 然 后 打开 服务 器 收集 的 错误 信息 进行 分 析 
来 改进 产品 的 质量 。 要 实现 这 个 过 程 ， 我 们 必须 考虑 下 面 几 个 问题 。 




















怎样 获取 错误 日 志 


浏览 器 提供 了 try...catch 和 window.onerror 的 两 种 机 制 来 帮助 我 们 获 
取 用 户 页 面 的 脚本 错误 信息 。 


一 般 来 说 ， 使 用 try...catch 可 以 捕捉 前 端 JavaScript 的 运行 时 错误 ， 同 


时 拿 到 出 错 的 信息 ， 例 如 错误 信息 描述 、 堆 栈 、 行 号 、 列 号 、 具 体 的 出 
错 文件 信息 等 。 我 们 也 可 以 在 这 个 阶段 将 用 户 浏览 器 信息 等 静态 内 容 一 
起 记录 下 来 ， 快 速 地 定位 问题 发 生 的 原因 。 需 要 注意 的 是 ，try...catch 无 
法 捕捉 到 语法 错误 ， 只 能 在 单一 的 作用 域内 有 效 捕获 错误 信息 ， 如 果 是 
异步 函数 里 面 的 内 容 ， 吏 需要 把 function 函 数 块 内 容 全 部 加 入 到 
try...catch 中 执行 。 














try{ 
// 单一 作用 域 try,, .catch 可 以 捕获 错误 信息 并 进行 处 理 
console.1log(obj); 


}catch(e)t 









































console.1og(e); // 处 理 异 常 ，ReferenceError: obj is not defined 























try{ 
// 不 同 作用 域 不 能 捕获 到 错误 信息 
setTimeout(function() { 
console.log(obj); // 直接 报错 ， 不 经 过 catch 处 理 
}, 200); 
}catch(e)t 
console.1log(e); 
. 


// 同一 个 作用 域 下 能 捕获 到 错误 信息 
setTimeout(function() { 
tryt{ 
// 当前 作用 域 try, , .catch 可 以 捕获 错误 信息 并 进行 处 理 























console.10g(obj); 


}catch(e)t{ 




















console.1log(e); // 处 理 异 常 ，ReferenceError: obj is not defi 





} 
}, 200); 


在 上 面 的 这 个 例子 中 ，try...catch 无 法 获取 异步 函数 setTimeout 或 其 
他 作用 域 中 的 错误 信息 ， 这 样 就 只 能 在 每 个 函数 里 面 添 加 try...catch 了 。 
相 比 之 下 ，window.onerror 的 方法 可 以 在 任何 执行 上 下 文中 执行 ， 如 果 
给 window 对 象 增加 一 个 错误 处 理 函 数 ， 便 既 能 处 理 捕获 错误 又 能 保持 
代码 的 优雅 性 了 。window.onerror 一 般 用 于 捕捉 脚本 语法 错误 和 运行 时 
错误 ， 可 以 获得 出 错 的 文件 信息 ， 如 出 错 信息 、 出 错 文 件 、 行 号 等 ， 当 
前 页 面 执行 的 所 有 JavaScript 脚 本 出 错 都 会 被 捕捉 到 。 














window.onerror = function (msg, url, line)t{ 
// 可 以 捕获 异步 函数 中 的 错误 信息 并 进行 处 理 ， 提 示 Script error. 
console.log(msg);  // 获取 错误 信息 
console.log(url);  // 获取 出 错 的 文件 路 径 
console.log(line); // 获取 错误 出 错 的 行 数 
































}; 


setTimeout(function() { 
console,1og(obj);  // 可 以 被 捕获 到 ， 并 在 onerror 中 处 理 
}, 200); 




















然而 ， 使 用 onerror 要 注意 ， 在 不 同 浏览 器 中 实现 函数 处 理 返 回 的 异 
常 对 象 是 不 相同 的 ， 而 且 如 果 报 错 的 JavaScript 和 HTML 不 在 同一 个 域名 
下 ， 错 误 时 window.onerror 中 的 errorMsg 全 部 为 script error 而 不 是 具体 的 


错误 描述 信息 ， 此 时 需要 诬 加 JavaScript 脚 本 的 路 域 设 置 。 


<script src="//www.domain.com/main.]js" crossorigin></script> 


如 果 服 务 怖 因为 一 些 原 因 不 能 设置 跨 域 或 设置 起 来 比较 厅 烦 ， 那 就 
只 能 在 每 个 引用 的 文件 里 添加 try…catch 进 行 处 理 。 


虽然 使 用 window.onerror 可 以 获取 页 面 的 出 错 信 息 、 出 错 文 件 和 行 
号 ， 但 是 window.onerror 有 足 域 限制 ， 如 果 需 要 获取 错误 发 生 的 具体 质 
述 、 扒 栈 内 容 、 行 号 、 列 号 和 具体 的 出 错 文件 等 详细 日 志 ， 就 必须 使 用 
try...catch， 但 是 try...catch 又 不 能 在 多 个 作用 域 中 统一 处 理 错 误 。 


笠 运 的 是 ， 我 们 可 以 对 前 端 脚本 中 和 常用 的 异步 方法 入 口 函 数 或 模块 
引用 的 入 口 方法 统一 使 用 try...catch 进 行 一 层 封装 ， 这 样 就 可 以 使 用 
try...catch 捕 获 每 个 引用 模块 作用 域 下 的 主要 错误 信息 了 。 例 如 我 们 残 
可 以 对 setTimeout 函 数 用 如 下 方式 进行 封装 并 捕获 错误 信息 。 





// 对 setTimeout 实现 函数 进行 包装 
window.setTimeoutTry= function(fn, time) { 
let args = arguments,; 
let _fn = function() { 
try { 
return fn.apply(this，args); // 将 函数 参数 用 try...catc 
} catch (e) { 
console.1log(e); 
} 
} 


return window['setTimeout'](_fn, time); 


try { 
setTimeoutTry(function() { 


obj // 这 获取 错误 信息 ，ReferenceError: obj is not defined 





}, 300); 
} catch (e) { 


console.1log(e); 


我 们 可 以 对 不 同 作 用 域 的 setTimeout 参 数 函 数 的 引入 方式 使 用 try... 
catch 进 行 封 装 ， 让 try...catch 能 捕获 到 setTimeout 脚 本 中 的 错误 并 使 用 
setTimeoutTry 函 数 来 代 奉 。 对 于 异步 引入 模块 定义 函数 require 或 define 
也 可 以 进行 类 似 的 封装 ， 这 样 就 可 以 获取 到 不 同 模块 里 面 作用 域 的 错误 

言 思 了。 因此 ， 这 里 捕获 错误 的 方式 可 以 根据 具体 的 条 件 和 场景 灵活 选 
择 ， 在 没有 特别 限制 的 情况 下 ， 使 用 window.onerror 是 比较 高 效 、 便 捷 
的 。 





怎样 将 错误 信息 上 传 到 服务 名 








如 果 捕 获 到 了 具体 的 错误 或 栈 信 息 ， 就 可 以 将 错误 信息 进行 上 报 
了 ， 如 出 错 信 息 、 错 误 行 号 、 列 号 、 用 户 浏 览 器 信息 等 ， 通 过 创建 
HTTP 请 求 的 方式 即 可 将 它们 发 送 到 日 志 收 集 服务 器 ， 这 些 对 于 迅速 定 
位 和 解决 问题 是 大 有 神 益 的 。 当 然 错误 信息 上 报 设计 时 需要 注意 一 点 : 
页 面 的 访问 量 可 能 很 大 ， 如 果 到 达 百 万 级 、 王 万 级 ， 那 么 就 需要 按照 一 
定 的 条 件 上 报 ， 例 如 根据 一 定 的 概率 进行 上 报 ， 人 否则 大 量 的 错误 信息 上 
报请 求 会 占用 日 志 收 集 服务 器 的 很 多 资源 和 流量 。 














怎样 通过 高 效 的 方式 来 找到 问题 


为 了 方便 碍 看 收集 到 的 这 些 信 息 ， 我 们 通常 可 以 建立 一 个 简单 的 内 
容 管 理 系统 〈Content Management System，CMS) 来 管理 查看 错误 日 
志 ， 对 同一 类 型 的 错误 做 归并 统计 ， 也 可 以 建立 错误 量 实时 统计 来 得 看 
错误 量 的 即时 变化 情况 。 当 某 个 版 本 发 布 后 ， 如 果 收 到 的 错误 量 明显 增 
加 ， 束 需要 格外 注意 。 另 外 一 点 要 注意 的 是 ， 上 报错 误 信 息 机 制 是 用 来 
辅助 产品 质量 改进 的 ， 不 能 因为 在 页 面 中 添加 了 错误 信息 收集 和 上 报 而 
影响 了 原 有 的 业务 模块 功能 。 








文件 加 载 失 败 监 控 





如 有 果 要 进一步 完善 地 检测 页 面 的 异常 信息 ， 可 以 尝试 对 静态 资源 文 
件 加 载 失败 的 情况 进行 监控 。 例 如 在 CDN 网 络 中 ， 可 能 因为 部 分 机 器 故 
障 ， 导 致 用 户 加 载 不 到 <img>、<script> 等 静态 资源 ， 但 是 开发 者 不 一 定 
能 复 现 ， 而 且 无 法 第 一 时 间 知 道 静态 资源 加 载 失败 了 。 这 种 情况 下 这 就 
需要 在 页 面 上 自动 捕获 文件 加 载 失 败 的 异常 来 进行 处 理 ， 可 以 对 <img> 
或 <script> 标 签 元 素 的 readyChange 进 行 是 否 加 载 成 功 的 判断 。 不 幸 的 
是 ， 只 有 部 分 下 浏览 器 支持 <img> 或 <script> 的 readyState， 因 此 一 般 还 需 
要 结合 其 他 方式 ， 如 onload， 针 对 不 同 浏览 器 分 开 处 理 。 








通过 这 种 方法 仅仅 是 判断 了 文件 或 脚本 加 载 成 功 的 情况 ， 我 们 还 需 
要 指定 一 个 文件 加 载 的 列表 ， 在 一 段 时 间 后 将 页 面 文件 加 载 的 结果 对 象 
上 报 给 服务 器 端 来 统计 不 同文 件 的 具体 加 载 情况 。 








// 页 面 需要 加 载 的 三 个 script 脚本 资源 


let Scripts = [script1, script2, script3]; 


// 三 个 script 加 载 的 初始 状态 
let loaded = { 
[script1]: false, 
[script2]: false, 


[script3]: false 


for(let Script of scripts)t{ 
// IE 浏览 器 的 情况 设置 readyState 来 判断 
If (script.readyState) { 





script.onreadystatechange = function() { 
let state = this.readysState; 
if (state === 'loaded' || state === 'complete') { 
callback(); // 脚本 加 载 成 功 回调 
// 表示 该 脚本 加 载 成 功 


Loaded[script] = true; 


} 
} else { 





// 其 他 浏览 器 ， 如 Firefox、Safari、Chrome 或 0pera， 结合 onLot 





script.onload = function() { 
callback(); // 脚本 加 载 成 功 回调 
// 表示 该 脚本 加 载 成 功 


loaded[script|] = true; 


setTimeout(function(){ 
// 例如 15 秒 后 执行 页 面 脚本 加 载 情况 的 上 报 进行 统计 
report(loaded); 





}, 15000); 


在 上 面 的 例子 中 ， 我 们 在 这 三 个 脚本 加 载 成 功 时 将 文件 加 载 是 个 
功 的 标志 位 改 为 tue， 一 段 时 间 后 进行 上 报 ， 如 宋 茶 个 文件 加 载 没有 成 
功 ， 其 地 址 将 会 上 报到 服务 器 器 并 被 我 们 收集 到 ， 然 后 通过 分 析 和 统计 
就 可 以 监控 到 文件 加 载 失败 的 情况 了 。 


5.5.4 ”前 端 性 能 分 析 上 报 


在 本 章 第 四 节 中 ， 我 们 讲 到 了 前 端 性 能 测试 方法 和 优化 方法 。 需 要 
注意 的 是 ， 开 发 者 怎样 知道 用 户 端 打 开 页 面 时 的 性 能 如 何 呢 ， 一 个 可 行 
的 方法 就 是 将 页 面 性 能 数据 进行 上 报 统计 ， 例 如 将 Performance Timing 
数据 、 开 发 者 自己 埋 点 的 性 能 统计 数据 通过 页 面 JavaScript 统 一 上 报到 远 
程 服务 器 ， 在 服务 器 端 统 计 计算 性 能 数据 的 平均 值 来 评判 前 端 具 体 页 面 
的 性 能 情况 。 移 动 端 首 屏 建议 加 载 的 最 长 时 间 为 3 秒 ， 推 荐 为 1.5 秒 以 
内 。PC 端 推荐 为 1 秒 以 内 ， 最 长 不 超过 1.5 秒 。 如 果 检 测 到 页 面 首 屏 加 载 
的 时 间 超 出 了 推荐 的 最 大 值 时 ， 那 就 需要 使 用 前 端 性 能 优化 手段 进行 优 
{Ys 











以 上 介绍 的 是 前 端 页 面 数据 统计 和 分 析 的 主要 内 容 ， 在 实际 项 目 中 
我 们 可 以 根据 产品 或 开发 需要 来 进行 实践 。 需 要 注意 的 是 ， 不 要 过 度 设 
计 ， 例 如 对 于 访问 量 很 少 的 网 站 进行 大 量 的 用 户 行 为 分 析 可 能 就 得 不 偿 











失 了 。 


5.6 ”前 闹 搜 索引 擎 优化 基础 


搜索 引擎 优化 简称 SEO， 知 道 的 人 也 许 很 多 ， 但 关注 的 人 并 不 是 太 
多 ， 因 为 我 们 常常 是 在 已 有 的 项 目 上 面 进行 开发 ， 或 者 进行 Hybrid 页 面 
开发 ， 壳 到 的 场景 并 不 多 。 作 为 前 并 工程 师 ， 了 解 搜 索引 擎 优 化 方面 的 
相关 知识 是 很 重要 的 ， 这 一 节 我 们 来 一 起 学 习 关 于 搜索 引擎 优化 方面 需 
要 注意 的 内 容 。 








5.6.1 title、keywords、description 的 


优化 


title、keywords、description 是 可 以 在 HTML 的 <meta> 标 签 内 定义 
的 ， 有 助 于 搜索 引擎 抓 取 到 网 页 的 内 容 。 要 注意 的 是 ， 一 般 title 的 权重 
是 最 高 的 ， 也 是 最 重要 的 ， 因 此 我 们 应 该 好 好 利用 title 来 提高 页 面 的 权 
重 。keywords 相 对 权重 较 低 ， 可 以 作为 页 面 的 辅助 关键 词 搜 索 。 
description 的 描述 一 般 会 直接 显示 在 搜索 结果 的 介绍 中 ， 可 以 使 用 户 快 
速 了 解 页 面 内 容 的 描述 文字 ， 所 以 要 尽量 让 这 上 段 文 字 能 够 描述 整个 页 面 
的 内 容 ， 增 加 用 户 进入 页 面 的 概率 。 











title 的 优化 


一 般 title 的 设置 要 尽量 能 够 概括 页 面 的 内 容 ， 可 以 使 用 多 个 title 关 键 
字 组 合 的 形式 ， 并 用 分 隔 符 连 接 起 来 。 分 隔 符 一 般 有 “”、“-”、“ 





、“，” 等 ， 其 中 “ ”分隔 符 比 较 容 易 被 百度 搜索 引擎 检索 到 ，“- ”分 隔 
符 则 容易 被 谷歌 搜索 引擎 检索 到 ,“，? 则 在 英文 站 氮 中 使 用 比较 多 ， 可 
以 使 用 空格 。title 的 长 度 在 桌面 浏览 句 端 一 般 建 议 控制 在 30 个 字 以 内 ， 

在 移动 端 控制 在 20 个 字 以 内 ， 寿 长 度 超出 时 浏览 硕 会 默认 稚 断 并 显示 省 
上 略 号 。 在 实际 开发 中 ， 因 为 具体 业务 的 关系 ， 我 们 可 能 更 多 针对 百度 搜 
索引 擎 进行 优化 ， 下 面 提出 几 点 关于 百度 搜索 引擎 优化 的 建议 。 














关于 title 格 式 的 优化 设置 可 以 遵循 以 下 规则 。 


o 每 个 网 页 都 应 该 有 独一无二 的 标题 ， 切 尽 所 有 的 页 面 都 使 用 同 
样 的 默认 标题 





o 标题 主题 明确 ， 应 该 包含 网 页 中 最 重要 的 信息 
o 简明 精练 ， 不 应 该 罗列 与 网 页 内 容 不 相关 的 信息 


o 用 户 浏览 通常 从 左 到 右 的 ， 建 议 将 重要 的 内 容 放 到 title 靠 前 的 位 
置 


o 使 用 用 户 所 熟知 的 语言 描述 ， 如 条 有 中 、 英 文 两 种 网 站 名 称 ， 
尽量 使 用 用 户 熟 知 的 语言 作为 标题 描述 





对 于 网 站 不 同 页 面 title 的 定义 可 以 设置 如 下 。 
o 首页 : 网 站 名 称 _ 提 供 服务 介绍 或 产品 介绍 


o 列表 页 : 列表 名 称 _ 网 站 名 称 





o 文章 页 :文章 标题 _ 文 章 分 类 _ 网 站 名 称 





o 如 宋 文 音标 题 不 是 很 长 ， 还 可 以 增加 部 分 关键 词 来 提高 网 页 的 





检索 量 ， 如 文章 title 关键 词 _ 网 站 名 称 


例如 某 个 博客 的 名 称 为 极限 前 闹 ， 那 么 其 首页 的 title 束 可 以 如 下 编 


<!-- 不 好 的 title 设置 --> 
<title> 极 限 前 端 </title> 


<title> 极 限 前 端 front end</title> 


<!-- 良好 的 title 设置 --> 
<tit1e> 极 限 前 端 _ 首 页 _ 前 端 技术 知识 _ 茶 某 茶 的 博客 </tit1e> 


keywords 


keywords 是 目前 用 于 页 面 内 容 检索 的 辅助 关键 字 信 息 ， 容 易 被 搜索 
引擎 检索 到 ， 所 以 恰当 的 设置 页 面 keywords 内 容 对 于 页 面 的 SEO 也 是 很 
重要 的 ， 而 且 keywords 本 吴 的 使 用 也 比较 简单 。 


description 优 化 


在 搜索 引擎 检索 结果 中 ，description 更 重要 的 作用 是 作为 搜索 结 
的 描述 ， 而 不 是 作为 权 值 计 算 的 重要 参考 因素 。description 的 长 度 在 桌 
面 浏 览 器 页 面 中 一 般 为 78 个 中 文字 符 ， 移 动 端 为 50 个 ， 超 过 则 会 自动 截 
断 并 显示 省 略 号 。 如 下 定义 title、keywords、description 比 较 合适 。 


<!-- 不 好 的 title、keywords、description 优化 设置 --> 


<title> 极 限 前 端 </title> 


一 和 人 LU TI 


<meta name="keywords" content=" 极 限 前 端 "> 


YL II 


<meta name="description" content=" 极 限 前 端 "> 


<!-- 良好 的 title、keywords、description 优化 设置 --> 
<tit1e> 前 端 搜索 引擎 优化 基础 _ 极 限 前 端 _ 前 端 技 术 知 识 _ 某 某 某 的 博客 </tit1Le> 
<meta name="keywords" content=" 现 代 前 端 技术 ， 前端 页 面 SEO 优化 ， 极 限 前 
<meta name="description" content=" 本 章 讲 述 了 前 端 搜 索引 擎 优化 基础 实践 技 才 


5.6.2 语义 化 标签 的 优化 


title、keywords、description 的 设置 对 页 面 SEO 具 有 重要 意义 ， 但 除 
了 页 面 title、keywords、description 外 ， 还 有 我 们 通常 说 的 页 面 结构 语义 
化 设计 ， 因 为 搜索 引擎 分 析 页 面 内 容 时 可 以 解析 语义 化 的 标签 来 获取 内 
容 ， 并 赋予 相关 的 权重 ， 因 此 语义 化 结构 的 页 面 就 比 全 部 为 <div> 标 俭 
元 素 布局 的 页 面 更 容易 被 检索 到 。 结 合 语义 化 标签 我 们 可 以 实现 更 多 的 
功能 。 























使 用 具有 语义 化 的 HTML5 标 签 结 构 





如 果 页 面 兼 容 性 条 件 允 许 〈( 主 要 是 指 浏览 器 莱 容 性 允许 ) ， 尽 量 使 
用 HTML5 语 义 化 结构 标签 。 如 图 5-8 所 示 ， 使 用 <header>、<nav>、 
<aside>、<article>、<footer> 等 标签 增加 页 面 的 语义 化 内 容 ， 可 以 让 搜 
索引 擎 更 容易 获取 页 面 的 结构 内 容 。 





< 站 av> 


<aside> <article> 


<footer> 





图 5-8 SEO 友好 的 页 面 结构 











唯一 的 H1 标 题 


建议 每 个 页 面 都 有 一 个 唯一 的 <h1> 标 题 ， 但 一 般 <h1> 内 容 并 不 是 
网 站 的 标题 。<h1> 作 为 页 面 最 高 层级 的 标题 能 够 更 容易 家 搜索 引擎 收 
录 ， 并 赋予 页 面相 对 较 高 权重 的 内 容 描述 。 一 般 我 们 设置 首页 的 <h1> 标 
题 为 站 点 名 称 ， 其 他 内 页 的 <h1> 标 题 则 可 以 为 各 个 内 页 的 标题 ， 如 分 类 
页 用 分 类 的 名 字 、 详 情 页 用 详情 页 标题 等 。 





因为 SEO 的 需要 ， 应 该 尽量 保证 搜索 引擎 抓 取 到 的 页 面 是 有 内 容 
的 ， 但 是 以 AJAX 技 术 实 现 的 SPA 应 用 在 SEO 上 不 具有 优势 ， 因 此 要 
尽量 避免 这 样 的 页 面 实现 方式 ， 后 面 会 讲解 如 何 使 用 后 端 数 据 泻 染 的 
方式 来 解决 AJAX 类 型 网 站 的 SEO 问题 。 





<img> 渤 加 alt 属 性 


一 般 要 求 <img> 标 和 俭 必须 设置 alt 必 性， 这 样 更 有 利于 搜索 引擎 检索 
出 图 片 的 描述 信息 。 


5.6.3 ”URI 规范 化 


统一 网 站 的 地 址 链接 : 


http://www.domain.com 
http://domain.com 
http://www.domain.com/index.html 


http://domain.com/index.html 


以 上 四 个 地 址 都 可 以 表示 跳 转 到 同一 个 站 点 的 首页 ， 虽然 不 会 对 用 
户 访问 造成 什么 蚊 烦 ， 但 对 于 搜索 引擎 来 说 是 四 条 网 址 并 且 内 容 相同 。 
这 种 情况 有 可 能 会 被 搜索 引擎 误 认为 是 作 兹 手段 ， 为 外 当 搜 索引 擎 要 规 
范 化 网 址 时 ， 需 要 从 这 些 选 择 中 挑 一 个 作为 代表 ,但 是 挑 的 这 一 个 不 一 
定 是 最 好 的 ， 因 此 我 们 最 好 统一 搜索 引擎 访问 页 面 的 地 址 ， 否 则 可 能 影 
啊 网 站 入 口 搜索 结果 的 权重 。 





301 跳 转 


如 果 URL 友 生 改 变 ， 一 定 要 使 旧 的 地 址 301 指 向 新 的 页 面 ， 否 则 搜 
索引 擎 会 把 原 有 的 这 个 URL 当 作 死 链 处 理 ， 之 前 完成 的 页 面 内 容 收录 权 





重 的 工作 融 都 失效 了 。 


canonical 


当 该 页 面 有 不 同 参 数 传递 的 时 候 ， 标 和 俭 属 性 也 可 以 起 到 标识 页 面 唯 
一 性 的 作用 ， 例 如 以 下 三 个 地 址 。 


//:domain.com/index.html 
//:domain.com/index.html?from=123 


//:domain.com/index.html?from=456 


在 搜索 引 警 中， 以 上 三 个 地 址 分 别 表示 三 个 页 面 ， 但 其 实 后 面 两 个 
一 般 表示 页 面 跳 转 的 来 源 ， 所 以 为 了 确保 这 三 个 地 址 为 同一 个 页 面 ， 往 
往 在 <head> 上 加 上 canonical 声 明 ， 告 诉 搜索 引擎 在 收录 页 面 时 可 以 按照 
这 个 href 提 供 的 页 面 地 址 去 处 理 ， 而 不 是 将 每 个 地 址 都 独立 处 理 。 





<link rel="cononical" href="//:domain.com/index.html" /> 


5.6.4 robots 





robots.txt 是 网 站 站 点 用 来 配置 搜索 引擎 抓 取 站 点 内 容 路 径 的 一 种 控 
制 方式 ， 放 置 于 站 点 根 目 录 下 。 搜 索引 擎 爬虫 访问 网 站 时 会 访问 
robots.txt 文 件 ，robots.txt 可 以 指导 搜索 引擎 爬虫 禁止 抓 取 网 站 某 些 内 容 
或 只 允许 抓 取 哪些 内 容 ， 这 就 保证 了 搜索 引擎 不 抓 取 站 点 中 临时 或 不 重 
要 的 内 容 ， 保 证 网 站 的 主要 内 容 被 搜索 引擎 收录 。 





5.6.5 _ Sitemap 


sitemap 格 式 一 般 分 为 HIML 和 XML 两 种 ， 命 名 可 以 为 sitemap.html 
或 sitemap.xml， 作 用 是 列 出 网 站 所 有 的 URL 地 址 ， 方 便 搜 索引 擎 去 逐个 
抓 取 网 站 的 页 面 ， 增 加 网 站 页 面 在 搜索 引擎 中 的 的 曝光 量 。 


<?xml1 version="1.0" encoding="UTF-8"?> 
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
<url> 
<loc>//www.domain.com</loc> 
<lastmod>2016-12-28</lastmod> 
<changefreq>always</changefreq> 
<priority>1.0</priority> 


</url> 


</urlset> 


如 上 述 代 码 所 示 ， 其 中 <urlset>、<url>、<loc> 为 必须 标签 ， 
<lastmod>、<changefreq>、<priority> 为 可 选 标 签 ，<lastmod> 表 示 页 面 
最 后 一 次 的 更 新 时 间 ，<changefreq> 表 示 文 件 更 新 频率 ，<priority> 表 示 
URL 相 对 的 重要 程度 ， 取 值 范 围 为 0~ 1.0，1.0 表 示 最 重要 ， 一 般 用 在 首 
页 上 上。 这样 搜 索引 擎 收录 网 站 时 不 仅 可 以 遍历 站 点 所 有 地 址 ， 还 可 以 给 
予 不 同 页 面 不 同 的 权重 。 





关于 SEO 的 内 容 有 很 多 ， 本 节 只 是 用 简短 的 篇 幅 讲解 了 实际 开发 中 
可 能 涉及 的 部 分 。 如 果 要 深入 研究 SEO， 可 以 读 一 本 专门 针对 于 搜索 引 
擎 优化 方面 的 书 (一 般 都 是 很 厚 的 一 本 )。 





5.7 前端 协 作 


前 端 技 术 从 来 都 不 是 独立 存在 的 ， 它 是 互联 网 应 用 复杂 到 一 定 程度 
后 衍生 出 来 的 一 块 分 文 技术 领 域 。 前 器 技 术 涉 及 UI 界 面 、 数 据 展示 、 用 
户 交 互 等 实现 ， 因 此 作为 一 名 合格 的 前 端 工程 师 就 不 可 避免 地 要 和 团队 
其 他 成 员 进行 协作 沟通 ， 如 产品 经 理 、UI 设 计 师 、 交 互 设计 师 、 后 台 工 
程 师 、 运 维 工程 师 等 。 这 一 节 我 们 就 来 聊 聊 前 端 工 程 师 应 该 如 何 高 效 地 
完成 团队 协作 的 使 命 


5.7.1 沟通 能 力 和 沟通 技巧 


可 能 是 因为 工作 性 质 的 缘故 ， 工 程 师 常 常 比 较 内 向 。 但 是 对 于 团队 
合作 的 项 目 ， 沟 通 必 不 可 少 ， 团 队 协作 中 的 沟通 意义 重大 。 





什么 是 沟通 能 力 ? 通俗 地 说 就 是 你 向 别人 传达 信息 或 从 别人 那里 获 
取信 息 的 能 力 。 沟 通 技 巧 就 是 为 了 高 效 传达 信息 或 获取 信息 使 用 的 方法 
和 手段。 例如 ， 产 品 经 理 需 求 宣讲 时 有 需求 PPT、 描 述 、 交 互 图 等 ， 那 
人 会 议 、PPT、 描 述 、 交 互 图 等 是 方法 和 手 
段 ， 即 沟通 扩 巧 。 学 会 了 高 效 的 沟通 扩 巧 可 以 大 大 减少 沟通 所 消耗 的 时 
间 ， 提 升 整体 工作 效率 。 


相反 地 ， 工 程 师 有 时 也 会 成 为 信息 的 传递 者 。 例 如 ， 你 同 产 品 经 理 
提出 他 的 需求 问题 或 改进 建议 时 ， 对 方 如 果 能 很 快 明白 你 要 讲 的 内 容 ， 
说 明 这 次 沟通 是 高 效 的 。 前 端 工程 师 需 要 合作 或 沟通 的 角色 多 种 多 样 ， 
所 以 我 们 平时 要 注意 提高 沟通 效率 来 节省 沟通 时 间 ， 从 而 提升 工作 效 
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5.7.2 ”与 产品 经 理 的 “对 抗 ” 


关于 工程 师 和 产品 经 理 有 无 数 经 典 幽 默 的 段子 ， 但 是 我 要 说 的 不 是 
这 些 。 产 品 经 理 通 常 是 直接 给 我 们 提出 开发 需求 的 团队 角色 ， 这 是 他 的 
工作 。 关 于 产品 经 理 ， 推 荐 前 端 工程 师 去 看 一 两 本 关于 该 角色 的 书籍 来 
了 解 一 下 这 个 工作 ， 这 样 才能 知己 知 役 ， 共 同 提高 效率 。 





对 于 产品 经 理 的 需求 ， 我 们 要 完成 ， 但 同时 务必 要 考虑 以 下 几 点 。 


o 产品 经 理 提 出 的 需求 是 售 明 确 。 要 先 乔 明白 需求 ， 如 有 果 需 求 不 
明确 ， 一 定 要 找 提 需求 的 人 确认 清楚 ， 不 要 盲目 写 代码 。 





o 技术 方案 是 人 否 可 行 ， 即 需求 开发 的 难度 评估 。 一 般 产 品 经 理 提 
再 求 之 前 会 评估 实现 的 难度 ， 但 不 一 定 准 确 ， 如 宋 茶 个 功能 实 
现 难度 较 大 超出 了 产品 经 理 的 预期 ， 一 定 要 提出 来 ， 售 则 后 期 
容易 出 现 风险 。 


o 需求 性 价 比 是 人 否 够 高 。 如 采 茶 个 功能 点 实现 代价 很 大 ， 但 是 功 
能 性 价值 一 般 ， 就 要 和 产品 经 理 沟通 ， 是 否 一 定 要 做 。 曾 经 遇 
到 过 极 少数 新 人 产品 经 理 提出 需要 翻新 架构 才能 完成 的 需求 ， 
这 种 情况 确认 不 可 行 后 建议 直接 驳回 ， 但 这 种 情况 极 少 。 


o 需求 是 否 合理 。 产 品 经 理 很 多 时 候 设 计 功能 是 基于 客观 分 析 的 
主观 设计 ， 不 可 能 做 到 完全 正确 ， 有 时 提出 的 需求 都 不 太 合 
理 ， 那 融 要 对 他 提 的 需求 多 质疑 几 次 ， 在 开始 之 前 把 这 些 问题 
过 滤 掉 。 





o 风险 管理 。 产 品 需求 常常 会 变更 ， 开 发 也 会 延期 ， 如 果 因 为 需 
求 变 更 导致 延期 一 定 要 告知 产品 经 理 ， 询 问 其 是 否 接受 ， 不 要 
等 到 需求 交付 时 再 告诉 大 家 并 未 完成 。 





尽量 术 








每 个 人 遇 到 的 情况 可 能 不 一 样 ， 但 有 一 
些 ， 理 解 和 尊重 合作 伙伴 ， 因为 能 _- 起 合作 都 是 人 


5.7.3 与 后 台 工 程 师 的 合作 


另 一 个 和 前 端 工 程 师 站 在 同一 战线 的 角色 可 能 就 是 后 台 开 发 工程 师 
了 。 一 般 线 上 出 现 问题 后 会 先 抛 给 前 端 工 程 师 ， 如 果 前 端 工程 师 定 位 到 
是 后 台 的 问题 ， 再 抛 给 后 台 工 程 师 ， 后 台 定 位 后 也 可 能 抛 给 底层 开发 工 
程 师 ， 甚 至 仍 调 到 运 维 工程 师 处 。 在 这 个 过 程 中 ， 有 几 个 问题 需要 注 
意 ， 开 发 过 程 常常 是 前 、 后 台 并 行 开 始 的 ， 那 么 在 开发 中 ， 前 端 如 何在 
没有 后 台数 据 接口 的 情况 下 进行 开发 协作 呢 ? 

















数据 协议 文档 


在 需求 开发 之 前 ， 我 们 通常 会 通过 文档 来 定义 数据 接口 协议 ， 这 是 
很 好 的 习惯 ， 但 实际 上 这 种 方式 存在 问题 。 工 程 师 一 旦 开始 开 及 ， 可 能 
号 没有 太 多 时 间 去 更 新 维护 接口 文档 了 ， 而 新 的 数据 接口 在 开发 过 程 中 
默认 是 一 定 会 变 的 ， 这 样 即使 使 用 了 接口 文档 管理 系统 也 不 一 定 实用 ， 
所 以 尽量 推荐 使 用 RESTfu 的 通用 协议 规范 来 定义 数据 接口 。 当 然 基本 
的 文档 一 定 是 需要 的 ， 它 可 以 帮助 我 们 解决 大 部 分 的 问题 。 











开发 沟通 方式 





这 点 直接 决定 前 、 后 端 工程 师 开 发 协作 的 效率 。 开 发 流程 在 进行 
时 ， 必 要 的 会 议 不 能 少 ， 信 息 沟通 的 方式 当然 最 好 是 前 、 后 台 开 发 人 员 
能 在 相同 的 办 公 区 域内 协作 。 一 些 大 的 企业 由 于 组 织 架 构 原 因 ， 前 、 后 
端 工程 师 可 能 会 分 开办 公 ， 这 种 情况 下 也 要 尽量 采用 最 直接 的 沟通 方式 
来 节省 沟通 时 间 。 


5.7.4 与 运 维 工程 师 的 “周旋 ” 


前 端 工 程 师 很 少 会 和 运 维和 人 员 沟 通 ， 但 也 不 是 完全 没有 。 运 维 人 员 
往往 很 有 特点 ， 由 于 涉及 稳定 性 问题 ， 所 以 处 理 问题 比较 谨 愤 。 如 果 你 
要 找 运 维 工程 师 协 作 ， 一 定 要 有 耐心 ， 同 时 也 不 能 被 他 们 拖 慢 节 礁 ， 也 
许 你 唯一 能 做 的 就 是 Push， 推 动 他 们 配合 你 的 工作 。 当 然 如 果 分 工 比 较 
综合 或 团队 比较 小 ， 也 可 能 不 存在 这 些 问题 。 


5.7.5 ”对 前 端 团 队 的 支持 


作为 一 名 前 器 工 程 师 ， 除 了 保质 完成 业务 外 ， 也 要 利用 一 部 分 时 间 
来 不 断 学 习 ， 文 持 团 队 的 技术 建设 ， 例 如 团队 开源 项 目 开发 维护 等 ， 目 
己 如 果 想 尝试 新 的 想法 也 可 以 提出 。 在 业务 的 开发 过 程 中 ， 我 们 常常 充 
当前 端 工程 师 的 角色 ， 而 在 团队 技术 影响 力 的 建设 中 ,我们 也 肩负 着 团 
队 技术 驱动 者 和 突破 者 的 使 命 。 这 样 前 端 团队 才能 越 来 越 有 影响 力 ， 相 
反 则 会 在 前 站 的 学 习 发 展 中 渐渐 失去 成 就 感 ， 甚 全 失去 工作 的 激情 。 所 
以 ， 希望 你 能 成 为 别人 眼中 的 优秀 工程 师 ， 同 时 在 团队 的 技术 建设 中 体 
现 自身 的 价值 。 























5.8” ”本章 小 结 


在 这 一 半 中 ， 我 们 围绕 前 端 项 目的 实践 技术 重点 向 读者 们 介绍 了 前 
端 开 及 规范 、 组 件 规范 设计 、 目 动 化 构建 原理 、 前 病 性 能 优化 、 前 端 数 
据 分 析 和 SEO 等 内 容 。 深 入 学 习 和 理解 它们 的 设计 思路 和 原理 能 帮助 我 
们 解决 前 端 大 型 项 目 开 发 时 过 到 的 问题 ， 同 时 这 些 也 是 前 端 工程 师 进行 
目 我 提升 的 必 备 系 养 ， 是 前 端 学 习 过 程 中 最 重要 的 技术 实践 内 容 ， 和 硕 望 
读者 们 可 以 有 一 个 通 透 的 理解 。 下 一 章 中 ， 我 们 将 开始 分 析 前 器 的 路 栈 
技术 ， 带 领 大 家 学 习 前 端 知识 技术 在 后 器 和 客户 端 中 的 应 用 和 实践 。 
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第 6 章 有 前 


一 | 一 


着 跨 栈 技术 


随 着 互联 网 架构 的 不 断 演 进 ， 前 端 技术 框架 从 后 台 输 出 页 面 到 后 台 
MVC， 再 到 前 端 MVC、MVP、MVVM， 以 及 到 Virtual DOM 和 MNV* 
的 实现 ， 已 经 发 生 了 巨大 的 变化 。 整 体 上 来 看 ， 前 端 也 正在 朝 着 模块 
化 、 组 件 化 和 高 性 能 Web 开 发 模式 化 的 方 癌 快速 发 展 。 除 了 传统 更 面 浏 
览 右 端 Web 上 的 应 用 ， 前 端 技术 栈 在 服务 端 或 移动 端 上 的 答 试 和 发 展 也 
从 来 没有 仿 止 过 ， 而 且 形 成 了 一 系列 成 熟 的 解决 方案 。 所 以 无 论 如 何 ， 
可 以 表 定 的 是 ， 前 病 的 技术 栈 能 解决 的 绝 不 只 是 页 面 上 的 问题 ， 前 端 工 
程 师 的 追求 也 绝 不 只 是 页 面 上 的 技术 。 前 端 技术 栈 到 底 如 何 实现 跨 服 务 
端 ， 又 如 何 扩展 到 移动 端 开 发 呢 ? 这 些 将 是 我 们 本 章 要 具体 讨论 的 。 


6.1 JavaScript 路 后 疹 实 现 扩 术 


这 几 年 全 栈 工程 师 已 然 成 为 一 个 很 热门 的 关键 词 ， 从 最 早 的 MEAN 
技术 栈 到 后 端 直 出 ， 再 到 现在 的 前 后 端 同 构 ， 前 端 通过 与 Node 络 合 的 开 
发 模式 越 来 越 被 开发 者 认同 并 在 越 来 越 多 的 项 目 中 得 到 实践 。 前 端 开 必 
者 都 热衷 于 在 Node 上 开发 有 以 下 几 个 原因 。 














o _ Node 是 一 个 基于 事件 驱动 和 无 阻塞 的 服务 妖 ， 非 常 适合 处 理 并 
发 请 求 ， 因 此 构建 在 Node 上 的 应 用 服务 相 比 其 他 技术 实现 的 服 
务 性 能 表现 要 好 ， 尽 管 目前 Node 服 务 器 仍然 是 单 进 程 运 行 的 。 





每 二 


o Node 端 运行 的 是 JavaScript， 对 于 前 端 开发 者 来 说 学 习 成 本 较 
低 ， 要 关注 的 问题 相对 来 说 比 前 端 更 纯粹 些 ， 例 如 前 端 
JavaScript 鳞 容 问题 或 者 性 能 问题 都 不 需要 过 于 关注 〈 不 是 说 
Node 上 就 不 用 关注 JavaScript 性 能 问题 ， 只 是 浏览 器 端 
JavaScript 的 性 能 问题 显得 更 为 突出 ) 。 








o 作为 一 名 前 端 工 程 师 确 实 需 要 掌握 一 门 后 台 语言 来 辅助 目 己 的 
技术 学 习 。 


o Node 端 处 理 数 据 泻 染 的 方式 能 够 解决 前 端 无 法 解决 的 问题 ， 这 
在 大 型 Web 应 用 场景 下 的 优势 就 体现 出 来 了 ， 这 也 是 目前 Node 
后 端 直 出 或 同 构 的 实现 方式 被 开发 者 广泛 使 用 的 一 个 重要 原 
因 。 








6.1.1 Node 后 端 开发 基础 概述 


作为 前 疹 工程师， 我 们 要 
基础 的 知识 。 我 们 先 来 看 一 下 
哪些 方面 的 基础 知识 和 技术 。 


行 Node 站 的 应 用 开发 ， 必 须 和 完了 解 一 些 


1 
进行 Node 后 端 上 的 应 用 开发 通常 需要 具备 





从 图 6-1 中 可 以 看 出 ， 要 掌握 Node 后 端的 主要 开发 技术 对 前 端 工 程 
师 来 说 并 不 复杂 ， 很 多 知识 和 技术 都 和 前 端 内 容 类 似 ， 而 且 相 对 来 说 大 
多 是 比较 纯粹 的 逻辑 实现 。 


Web 服 务 器 基础 知识 









图 6-1 Node 后 端 基础 知识 和 技术 





o 服务 器 知识 基础 。 和 浏览 器 端 开发 一 样 ， 我 们 需要 对 Web 服 务 
器 的 一 些 基础 知识 有 较 全 面 的 认识 ， 例 如 HITP 请 求 的 过 程 、 
返回 码 、 缓 存 、Cookie 或 Session 在 服务 器 端的 工作 机 制 、Web 
安全 〈sdql 注 入 、xss 内 容 、 用 户 认 证 信息 加 密 等 处 理 方 式 ) 等 
问题 ， 我 们 都 应 该 有 较 清 晰 的 了 解 。 邓 运 的 是 ， 这 些 和 前 并 的 
基础 知识 是 相通 的 。 


简单 的 数据 库 设 计 能 力 。 少 数 情况 下 ， 我 们 可 能 会 自己 去 设计 
一 些 简单 数据 库存 储 表 的 结构 ， 这 就 要 求 我 们 具备 简单 设计 数 
据 库 结 构 和 数据 库 表 的 能 力 ， 目 前 在 Node 上 结合 MongoDB 等 
NoSQL 数 据 库 ， 使 用 起 来 已 经 非常 方便 了 。 结 合 MongoDB 对 
数据 库 对 象 的 常用 操作 进行 抽象 处 理 的 代码 如 下 。 


const connectName = 'localhost/datasite',; 
const dbconect = require('monk')(connectNanme); 
function DB(dbname) { 

this.db = dbconect.get(dbname); 


// 插入 数据 库 记录 操作 


this.insert = function*(data) { 





let result = yield this.db.insert(data); 


return result,; 


// 查找 数据 库 记 录 操 作 
this.find = function* (ob]j, query) { 
let result; 
if (query) { 
result = yield this.db.find(ob]j, query); 
} else { 
result = yield this.db.find(obj); 
} 


return result,; 


// 更 新 数据 库 记 录 操 作 
this.update = function* (condition, data) { 
let result = yield this.db.update(condition, data 


return result,; 


// 删除 数据 库 记 录 操 作 
this.remove = function* (condition) { 
let result = yield this.db.remove(condition); 


return result,; 


module.exports = DB; 


o 后 端 MVC 设 计 理 念 。 就 Node 端 Web 框 架 来 说 ， 目 前 主流 设计 模 
式 仍 是 MVC 方 式 ， 即 用 户 请 求 进入 路 由 层 Route 匹配 ， 匹 配 成 
功 后 进入 控制 占 Controller， 控 制 器 调用 Model 数 据 库 操作 ， 然 
后 将 处 理 后 的 数据 结合 View 模 板 泻 染 出 HTML 文 本 给 用 户 ， 或 
者 是 将 处 理 后 的 的 数据 直接 作为 接口 返回 。 但 其 实 这 个 流程 和 
前 并 MVC 框 架 的 实现 理念 也 是 类 似 的 ， 只 是 实现 的 技术 不 同 
a 

o 后 端 异步 。 除 了 理解 异步 的 概念 ， 我 们 对 Node 服 务 端 异步 编程 
的 方式 也 要 非常 熟悉 。 例 如 对 数据 库 操 作 或 网 络 请 求 的 异步 处 
理 方式 我 们 要 有 清晰 的 理解 。 同 时 ，Node 服 务 器 对 


ECMAScript 6 十 的 支持 为 我 们 实现 异步 编程 提供 了 许多 便捷 的 
实现 方案 ， 如 Promise、Generator、async/await 等 ， 这 些 都 是 之 
前 重点 介绍 过 的 ， 所 以 不 用 太 担 心 技术 实现 的 问题 ， 例 如 新 的 
Koa 框 架 就 文 持 async/await 来 直接 处 理 Web 后 端 中 的 异步 逻 

辑 。 


const Koa = require('koa'); 


const app = new Koal( ); 


app.use(async (ctx, next) => { 
const start = new Date(); 
await next(); 
const ms = new Date() - start; 
// 输出 请 求 地 址 URL 和 所 用 时 间 
console.log( ${ctx.url} : ${ms}ms. ); 
}); 





// 页 面 响应 输出 
app.use(ctx => { 
ctx.body = 'Hello Koa!',; 


}); 


o 模块 化 思想 。 目 前 的 Node 端 JavaScript 开 发 主要 以 ECMAScript 6 
十 标准 为 主 ， 文 件 之 间 逻 辑 的 引用 仍 是 通过 模块 化 机 制 来 实现 
的 ， 所 以 这 里 理解 模块 化 规范 和 使 用 仍 是 非常 重要 的 ， 在 前 面 
章节 中 我 们 也 讲 到 ，Node 端 常用 的 模块 化 规范 以 CommonJS 和 
import/export 为 主 ， 与 浏览 器 开发 的 常用 模块 化 规范 是 相同 








的 ， 这 里 不 再 殉 述 。 
o 中 间 件 技术 。 在 实际 开发 过 程 中 ， 我 们 还 需要 熟练 学 握 音 用 中 
间 件 的 运用 和 开发 。 例 如 Cookie、Session、Body 解 析 等 高 效 的 
中 间 件 能 够 帮助 我 们 提高 开发 的 效率 ， 不 过 在 特殊 的 场景 中 ， 
我 们 也 需要 根据 具体 问题 来 开发 满足 具体 需求 的 中 间 件 模块 ， 
例如 在 Koa 中 就 可 以 用 如 下 方式 引入 自己 的 中 间 件 模块 。 





const koa = require('koa'); 


const app = koa(); 


const myMiddleware = require('./middleware/my-middleware 
app.use(myMiddleware); 
o 接口 设计 规范 。 推 荐 使 用 如 RESTful 这 样 的 规范 来 定义 数据 接 


口 ， 前 面 章节 中 我 们 也 具体 介绍 过 RESTful 接 口 规范 设计 的 好 
处 ， 所 以 要 尽量 利用 它 的 优势 来 解决 问题 。 





o 后 端 部 署 技术 和 基本 运 维 能 力 。 因 为 Node 主 要 是 在 服务 器 上 工 
作 的 ， 所 以 掌握 基本 的 服务 器 部 署 和 运 维 能 力也 是 很 必要 的 ， 
例如 Log 日 志 、 服 务 器 性 能 数据 的 收集 和 查看 等 ， 都 有 助 于 我 
们 及 时 发 现 和 定位 服务 器 端的 脚本 运行 问题 。 


再 要 了 解 的 是 ， 这 里 讲 到 的 主要 是 针对 服务 器 Web 层 的 实现 技术 ， 
关于 底层 服务 层 数 据 开 发 设计 的 内 容 本 书 不 涉及 。 


6.1.2 早期 MEAN 倍 介 





Node 出 现 的 早期 还 不 像 现 在 一 样 拥有 很 复杂 的 概念 ， 相 关 技 术 和 语 
言 的 标准 还 不 成 熟 ，Node 开 发 一 般 用 的 比较 多 的 方案 束 是 使 用 Express 
作为 Web 框 架 进 行 小 型 的 Web 站 点 建设 ， 与 之 结合 的 主流 技术 则 以 
M(Mysql)、E(Express)、A(Angular)、N(Node) 最 为 典型 ， 甚 至 到 了 今天 
MEAN 技 术 组 合 的 方式 仍 在 沿用 。 图 6-2 为 MEAN 的 经 典 结构 。 











图 6-2 MEAN 全 栈 架 构 示 意图 


前 端 一 般 使 用 Angular 来 管理 实现 页 面 应 用 ， 服 务 端 Web 框 架 以 
Express 为 主 ， 同 时 使 用 免费 开源 的 MySQL 数 据 库 ， 这 样 就 可 以 很 快 地 
构建 一 个 Web 应 用 了 。 关 于 MEAN 的 使 用 也 非常 简单 ， 读 者 们 参看 对 应 
文档 就 可 以 快速 入 门 ，MEAN 的 安装 使 用 方法 如 下 。 


$ npm install -g mean-cli 


$ mean init appName 


$ cd appName && npm install 
$ gulp 
$ node server // 打开 浏览 器 访问 http://localhost:3000/ 就 可 以 启动 运行 - 


今天 我 们 可 能 不 一 定 再 去 选择 使 用 它 ， 因 为 可 以 代 蔡 实现 的 成 熟 方 
案 已 经 很 多 了 ， 各 类 其 他 前 后 端 框 洪 都 可 以 用 来 灵活 组 合作 为 MEAN 的 
丛 代 选 型 方案 。 





6.1.3 Node 后 端 数 据 演 染 





对 于 前 端 开发 者 来 说 ， 在 大 型 Web 应 用 开发 中 ， 很 多 时 候 并 不 需要 
完全 重新 设计 整个 应 用 后 台 的 架构 ， 更 多 的 情况 下 需要 结合 Node 的 能 力 
帮助 我 们 解决 前 后 端 分 离开 发 模式 下 无 法 解决 的 问题 。 我 们 先 来 看 下 通 
常 前 后 端 分 离 的 开发 模式 下 有 哪些 问题 ， 利 用 Node 端 的 服务 又 是 如 何 帮 
助 我 们 解决 这 些 问题 的 。 





SPA 场 景 下 SEO 的 问题 


通常 情况 下 ，SPA 应 用 或 前 后 端 分 离 的 开发 模式 下 页 面 加 载 的 基本 
流程 是 ， 浏 览 器 端 先 加 载 一 个 空 页 面 和 JavaScript 脚 本 ， 然 后 异步 请 求 接 
口 获取 数据 ， 演 染 页 面 数据 内 容 后 展示 给 用 户 。 那 么 问题 来 了 ， 搜 索引 
擎 抓 取 页 面 解析 该 页 面 HIML 中 关键 字 、 摘 述 或 其 他 内 容 时 ，JavaScript 
尚未 调用 执行 ， 搜 索引 擎 获取 到 的 仅仅 是 一 个 空 页 面 ， 所 以 无 法 获取 页 
面 上 <body> 中 的 具体 内 容 ， 这 就 比较 影响 搜索 引擎 收录 页 面 的 内 容 排 行 
了 。 尽 管 我 们 会 在 空 页 面 的 <meta> 里 面 添加 keyword 和 description 的 内 
容 ， 但 这 肯定 是 不 够 的 ， 因 为 页 面 关键 性 的 正文 内 容 描述 并 没有 被 搜索 








引擎 获取 到 。 


如 果 使 用 Node 后 端 数据 泻 染 《有 人 称 之 为 直 出 ， 后 文中 也 称 之 为 直 
出 层 ) ， 在 页 面 请 求 时 将 内 容 泻 染 到 页 面 上 输出 ， 那 么 搜索 引擎 获取 到 
的 HTML 就 已 经 包含 页 面 完整 的 内 容 ， 页 面 也 就 更 容易 被 检索 到 了 。 








前 端 页 面 洽 染 展 示 绥 慢 的 问题 


除了 SEO 问 题 ， 在 前 后 并 分 离 的 开发 模式 下 页 面 在 JavaScript 执 行 泻 
染 之 前 是 空白 的 (或 提示 用 户 加 载 中 〉， 。 如 图 6-3 所 示 ， 用 户 在 看 到 数 
据 时 已 经 花费 的 网 络 等 竺 时间: _ DOM 下载 时 间 + DOM 解 析 时 间 + 
JavaScript 文 件 请 求 时 间 + JavaScript 部 分 执行 时 间 十 接口 请 求 时 间 + 
DOM 演 染 时 间 。 这 时 用 户 看 到 页 面 数据 时 已 经 是 三 次 串 行 网 络 资源 请 
求 之 后 的 事情 了 。 


图 6-3 ”前 后 端 分 离 方式 页 面 泻 染 主 要 流程 

















然而 ， 如 果 使 用 后 端 下 出 来 进行 数据 泻 染 ， 弟 先 SEO 的 问题 不 复 存 
在 ， 用 户 浏 览 右 加 载 完 DOM 的 内 容 解析 后 即 可 立即 展示 ， 网 络 加 载 的 
问题 也 得 到 解决 。 其 他 的 逻辑 操作 《如 事件 绑 定 和 滚动 加 载 的 内 容 ) 则 
可 按 需 、 按 异步 加 载 ， 从 而 大 幅度 减少 展示 页 面 内 容 花 费 的 时 间 。 那 么 
一 般 Node 后 端 数据 演 染 的 整个 流程 又 是 怎样 的 呢 ? 











图 6-4 为 目前 一 般 后 台 页 面 数 据 直 出 的 通用 架构 设计 ， 直 出 层 接受 
前 端的 路 由 请 求 ， 并 在 Node 端 的 Controller 层 异步 请 求 服务 接 入 层 接 


口 ， 获 得 Model 数 据 并 进行 组 装 拼接 ， 然 后 提取 相对 应 的 Node 端 View 模 
板 演 染 出 HTML 输 出 给 用 户 浏览 器 ， 而 不 用 通过 前 端 JavaScript 请 求 动态 
数据 后 演 染 。 不 仅 如 此 ， 直 出 层 根据 不 同 的 浏览 器 userAgent， 也 可 以 提 
取 不 同 的 模板 演 染 页 面 返回 给 不 同 的 用 户 浏 览 器 ， 所 以 这 种 实现 方式 不 
仅 非常 适合 大 型 应 用 服务 的 实现 场景 ， 而 且 可 以 方便 地 实现 网 站 的 啊 应 


式 内 容 直 出 。 


















泉 面 端 提取 模板 
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移动 端 浏 览 器 














业务 接 入 层 业务 接 入 模块 A 业务 接 入 模块 B 业务 接 入 模块 N 








底层 服务 层 数据 缓存 服务 数据 文件 服务 数据 库 服 务 


图 6-4 Node 直 出 层 开 发 Web 架 构 


6.1.4 前 后 端 同 构 概述 


在 前 后 端 分 离 的 开发 模式 上 加 入 直 出 层 ， 解 决 了 SEO 和 数据 加 载 显 
示 绥 慢 的 问题 。 可 是 我 们 不 得 不 思考 两 个 新 的 问题 。 


o 前 端的 开发 实现 向 直 出 层 偏 移 ， 我 们 不 得 不 在 原来 的 开发 模式 





上 做 出 修改 来 适应 直 出 层 内 容 的 开发 ， 例 如 修改 后 端 模 板 来 适 
应 现 有 的 开发 模式 ， 结 果 我 们 不 得 不 维护 两 套 不 同 的 前 后 台 模 
板 或 技术 实现 一 一 前 端 泻 染 实现 逻辑 和 后 端 直 出 实现 逻辑 ， 尺 
管 可 能 都 是 用 JavaScript 写 的 。 





o 如 果 是 在 移动 端 Hybrid 应 用 上 ， 离 线 包 机 制 实现 可 能 就 会 出 现 
问题 。 因 为 每 次 都 是 从 后 端 直 出 HTML 结 构 给 前 端 ， 这 样 就 难 
做 到 将 HTML 文 件 进行 离线 缓存 ， 而 只 能 进行 其 他 静态 文件 的 
绥 存 。 在 Hybrid App 的 应 用 场景 下 ， 其 实 我 们 更 希望 做 到 的 是 
移动 端 首次 打开 页 面 时 使 用 后 端 直 出 内 容 来 解决 加 载 慢 和 SEO 
问题 ， 而 在 有 离线 绥 存 的 情况 下 则 使 用 客户 端 本 地 缓存 的 静态 
文件 拉 取 数据 返回 泻 染 的 方式 来 实现 ， 或 者 未 来 在 高 版 本 的 浏 
览 器 支持 HTTP2 的 条 件 下 使 用 前 端 泻 染 ， 低 端 浏 览 嚣 不 支持 
HTTP2 的 情况 下 则 使 用 直 出 的 方式 实现 。 








所 以 我 们 需要 一 套 完善 的 开发 方式 ， 和 原 有 开发 方式 保持 一 致 ， 且 
能 够 同时 用 于 前 后 端 分 离 的 开 肥 模式 和 后 端 数据 泻 染 模板 开发 方式 中 。 
这 种 开 友 模式 残 是 我 们 所 说 的 前 后 并 同 构 ， 下 面 系统 地 来 了 解 一 下 前 后 
端 同 构 的 一 些 内 容 。 





1. 实现 同 构 的 核心 








前 后 端 同 构 的 守则 是 ， 只 开发 一 套 项 目 代 码 ， 既 可 以 用 来 实现 前 端 
的 JavaScript 加 载 泻 染 也 可 以 用 于 后 台 的 直 出 泻 染 。 为 什么 可 以 这 样 做 
呢 ? 和 前 端 泻 染 数据 内 容 的 方式 相同 ， 页 面 直 出 层 内 容 也 是 通过 数据 加 
上 模板 编译 的 方式 生成 的 ， 前 端 泻 染 和 后 台 直 出 的 模式 生成 DOM 结 构 
的 区 别 只 在 于 数据 和 模板 的 泻 染 发 生 在 什么 时 候 。 如 果 使 用 一 套 能 在 前 
端 和 后 端 都 编译 数据 的 模板 系统 ， 我 们 就 可 以 做 到 使 用 同一 套 开 发 代码 

















在 前 后 站 分 别 进行 数据 泻 染 解析 。 因 此 前 后 端 同 构 的 核心 问题 是 实现 前 
后 台数 据 泻 染 的 统一 性 。 


2. 同 构 的 优势 


可 以 确定 的 是 ， 除 了 解决 前 后 端 开 友 方式 的 问题 ， 前 后 端 同 构 的 网 
站 具有 一 些 明 显 的 优势 : (1) 可 以 根据 用 户 的 需求 方便 地 选择 使 用 前 
端 泻 染 数据 还 是 后 人 台 直 出 页 面 数 据 ， (2) 开发 者 只 需 维护 一 套 前 并 代 
码 ， 而 且 可 以 沿用 前 端 原 有 的 项 目 组 件 化 管理 、 打 包 构 建 方式 ， 根 据 不 
同 的 构建 指令 生成 类 似 的 前 后 端 数据 模板 或 组 件 在 前 后 端 执行 解 林 ， 所 
以 这 对 于 DOM 结 构 层 上 的 开发 方式 应 该 是 一 致 的 。 











当然 ， 同 构 的 目的 是 为 了 统一 前 后 合 的 数据 渲染 方案 ， 目 然 也 会 替 
扯 到 前 后 端的 适应 性 修改 ， 实 现 前 后 端 同 构 要 做 的 一 些 额 外 工作 可 能 束 
征 前 端 工 程 师 要 开发 Node 问 直 出 层 上 的 路 由 配置 和 实现 数据 接口 的 编 
写 。 从 实践 的 经 验 上 来 看 ， 这 部 分 的 工作 量 常 常 是 无 法 避免 的 ， 但 是 配 
合 在 直 出 层 来 进行 会 更 加 值得 。 


6.1.5 ”前 后 端 同 构 实现 原理 


讲 到 前 后 端 同 构 的 实现 ， 我 们 或 许 会 很 快 想 到 一 些 提供 这 项 能 力 的 
框架 ， 但 我 们 并 不 讨论 具体 的 框架 ， 而 是 讨论 实现 的 原理 。 目 前 就 前 后 
端 同 构 的 技术 实现 上 来 看 ， 至 少 有 三 种 思路 : 数据 模板 的 前 端 泻 染 和 后 
台 直 出 、MVVM 的 前 端 实现 和 后 人 台 直 出 、Virtual DOM 的 前 端 泻 染 和 后 
端 直 出 。 下 面 逐 一 介绍 。 








基于 数据 模板 的 前 后 端 同 构 方 案 


早 在 前 端 MVC 开 发 的 时 代 ， 前 问 模 板 的 使 用 束 非 常 广泛 ， 例 如 
Mustache、Handlebar 等 ， 基 本 原理 是 将 模板 描述 语法 与 数据 进行 拼接 生 
成 HTML 代 人 码 字 符 串 插入 到 页 面 特定 的 元 素 中 来 完成 数据 的 泻 染 。 同 
理 ， 后 端 直 出 层 也 可 以 通过 该 方法 来 实现 数据 的 泻 染 产 生 HTML 字 符 串 
输出 到 页 面 上 ， 如 有 果 前 后 端 使 用 同一 个 模板 解析 引擎 ， 那 么 我 们 只 需要 
编写 同一 段 模板 描述 语法 结构 就 可 以 在 前 端 和 后 端 分 开 进 行 泻 染 了 。 








如 图 6-5 所 示 ， 对 于 前 问 开 发 的 同一 段 模板 语法 结构 ， 我 们 既 可 以 
选择 在 浏览 器 问 泻 染 生 成 HTML 字 符 串 输出 ， 也 可 以 选择 在 后 端 泻 染 生 
成 HTML 字 符 串 输出 。 如 果 选 择 在 前 端 演 染 ， 则 可 以 将 模板 进行 打包 编 
译 ， 在 数据 请 求 成 功 后 进行 DOM 泻 染 ， 如 果 选 择 后 端 泻 染 ， 就 可 以 将 
模板 数据 直接 发 送 到 下 出 层 的 View 视 图 进行 渲染 ， 实 现 同一 个 模板 语法 
结构 在 前 后 端 泻 染 出 相同 的 内 容 。 不 过 这 里 需要 注意 的 事 是 ， 要 保证 前 
后 端 使 用 的 模板 泻 染 引擎 或 者 模板 解析 的 语法 是 一 致 的 。 





模板 语法 结构 





《form action=“ ”id= form“> 
《label for=”text”>{{label}}</label> 
“input type=” text” value=” {{value}}”> 
</form> 








前 端 模板 解析 后 端 模板 解析 
=" foxtm” > { 
xt”> 用 航 馈 4L1a 明 了 彤 名 ”， label: “用 户 名 ”， 


3xt”vahyea' 输 猴 视 办 储 入 value: “输入 初始 值 ， 
} } 











《form action=Y ”id=“ form > 
《label for=”“ text“ > 用 户 名 /label> 


《input type=“text”″”value= “输入 初始 值 ?> 
</form> 








前 端 生成 HTML 文 本 后 端 生成 HTML 文 本 


图 6-5 ”模板 泻 染 的 同 构 方式 原理 




















基于 MVVM 的 前 后 端 同 构 


我 们 知道 MYVM 框 架 页 面 上 的 JavaScript 人 逻辑 主要 是 通过 
Directive 〈 不 只 是 Directive， 还 有 filter、 表 达 式 等 ， 以 Directive 为 主 ) 来 
实现 的 ， 一 般 前 端 页 面 加 载 完 成 后 会 开始 扫描 DOM 结 构 中 的 Directive 指 
令 并 进行 DOM 操 作 泻 染 或 事件 绑 定 ， 所 以 数据 的 显示 仍然 需要 页 面 执 
行 Directive 后 才能 完成 。 那 么 如 果 将 Directive 的 操作 在 直 出 层 实现 ， 浏 
唤 右 直接 输出 的 页 面 不 就 是 泻 染 后 的 内 容 数 据 了 吗 ? 








如 图 6-6 所 示 ， 在 项 目 开 发 中 ， 前 端 编写 的 同一 段 MVVM 的 语法 结 
构 通过 前 端 MVVM 框 架 解 析 或 后 端 Directive 运 行 解析 最 终 都 可 以 生成 相 
同 的 HIML 结 构 ， 不 同 的 是 前 端 执 行 解 析 后 生成 的 是 ViewModel 对 象 并 
通过 浏览 器 体现 ， 后 端 泻 染 则 生成 HTML 标 签 的 文本 字符 串 输 出 给 浏览 
器 。 这 里 同样 需要 做 一 件 事 ， 即 在 后 台 实 现 一 个 与 前 端 解 析 Directive 相 
同 的 模块 ， 甚 至 还 包括 一 些 filter、 语 法 表达 式 等 的 实现 。 这 样 就 可 以 在 
前 后 端 完成 同一 段 语法 结构 的 解析 了 。 





MVVM 语 法 结构 











《form action= ”id= “form “> 

《label for=”text” q-html=”label”></label> 

《input type=”text” q-value=”value” gq-model=”value”> 
《button q-on="”click: submit”></button> 
</form> 









前 端 MVVM 框 架 解析 后 端 directives 解 析 









ion=”” id=”form”> a 
1 for=”text” qt 出现 记名 </1a 
t type=”text” qx8Ub86=” 轩 入 凶 昌明， 
lue”value=“ 输 入 初始 值 ”> 


abel: “用户 名 ， 
value: “输入 初始 值 ， 








《form action= ”id=“form “> 
《label for=”text”q-html=”label”3 用 户 名 </1label1> 





《input type=”text” q-value=”value” gq- 
model=”value”value=“ 输 入 初始 值 ”> 


前 端 生 成 DOM tree 后 端 生成 HTML 文 本 


图 6-6 MVVM 实 现 的 同 构 方式 原理 




















基于 Virtual DOM 的 前 后 端 同 构 


前 面 讲 到 ， 目 前 Virtual DOM 作 为 一 种 新 的 编程 概念 被 广泛 应 用 在 
实际 项 目 开 发 中 ， 其 核心 是 使 用 JavaScript 对 象 来 描述 DOM 结 构 。 那 么 
既然 Virtual DOM 是 一 个 JavaScript 对 象 ， 就 表示 其 可 以 同时 存在 于 前 后 
端 ， 通 过 不 同 的 处 理 方式 来 实现 同 构 。 











如 图 6-7 所 示 ， 在 前 端 开发 的 组 件 中 声明 某 段 Virtual ”DOM 描 述 语 
法 ， 然 后 通过 Virtual DOM 框架 解 析 生 成 Virtual DOM， 这 里 的 Virtual 
DOM 既 可 以 用 于 在 浏览 器 端 生成 前 端的 DOM 结 构 ， 也 可 以 在 直 出 层 直 
接 转 换 成 HTML 标 记 的 文本 字符 串 输出 ， 后 面 这 种 情况 就 可 以 在 服务 站 
上 实现 Virtual ”DOM 到 HTML 文 本 字符 串 的 转换 。 这 样 ， 通 过 对 Virtual 
DOM 的 不 同 操 作 处 理 ， 就 可 以 统一 前 后 端 泻 染 机 制 ， 实 现 组 件 的 前 后 


端 对 同一 段 描述 语法 进行 泻 染 。 


“ll class= ul-llst-ltem 23¢/112 
/ul>) 


sy 


Virtual DOM 描 述 语 法 


创建 Virtual DOM 


» 


tagName: "ul 
props: { 
ids Til1ist 


Virtual DOM 


人 
children: [ 


{tagName: ’1i’, props: {class: “ui-list-item }, children: [ 
{tagName: 1i’, props: {class: ’ui-list-item }, children: [ 
{tagName: ’1i’, props: {class: ’ui-list-item }, children: [ 


y 


wT 的 
| 
9 


} 


泻 染 成 DOM 演 染 成 HTML 


DDM tree <ul id- ui-list > 
《Ji elass= ui~list=item >1</1i> 


《li class=”ui-list-item >2</1i> 


《li class="ui-list-item >3</1i> 
A 


前 端 生 成 DOM tree 后 端 生 成 HTML 文 本 
图 6-7 Virtual DOM 实 现 同 构 方 式 原理 








jg 
让 
上 





这 里 Virtual DOM 上 的 逻辑 实现 仍然 需要 在 浏览 右 端 进行 事件 绑 定 
来 完成 ， 最 好 能 让 同 构 框架 帮助 我 们 自动 完成 ， 根 据 HIMEL 的 结构 进行 
特定 的 事件 绑 定 处 理 ， 保 证 最 后 展示 给 用 户 的 页 面 是 完整 且 带 有 交互 逻 








辑 的 。 





这 里 介绍 了 三 种 前 后 端 同 构 实现 的 思路 ， 而 且 三 种 方法 目前 都 有 框 
染 来 实现 。 但 是 无 论 选择 使 用 哪 一 种 方案 ， 其 核心 都 是 一 致 的 一 一 使 用 
同一 种 结构 内 容 的 描述 方式 通过 特定 的 规则 解析 转化 成 前 端 和 服务 端 均 
能 够 处 理 的 DOM 结 构 形式 。 此 时 ， 无 论 是 前 端 模板 、ViewModel、 
Virtual DOM、DOM 还 是 HIML 片 段 ， 都 只 是 前 端 浏 览 器 结构 层 内 容 的 
表示 方式 ， 而 且 是 可 以 相互 转化 的 ， 所 不 同 的 是 ， 页 面 上 的 DOM 是 用 


户 最 终 看 到 的 内 容 。 





图 6-8 为 前 后 问 同 构 的 原理 图 。 可 以 认为 实现 前 后 端 同 构 的 核心 都 
体现 在 HTML 的 结构 形式 变化 上 ， 页 面 内 容 的 描述 方式 有 很 多 ， 而 且 可 
以 通过 特定 的 处 理 过 程 实现 转化 ， 这 样 就 提供 了 更 多 的 可 能 性 。 











生成 HTML 





模板 解析 


生成 DOM 


server 解 析 浏览 器 解析 


ViewMode1 初 始 化 
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图 6-8 前 后 端 同 构 的 核心 原 tC 








需要 注意 的 是 ， 无 论 选 择 哪 一 种 前 后 端 同 构 的 实现 方案 ， 所 需要 处 
理 的 几 个 问题 是 类 似 的 。 


o 前 后 端 框架 选择 。 这 里 主要 包括 前 端 使 用 的 主要 框架 和 后 端 结 
构 泻 染 解 析 模 块 的 选择 ， 通 常 选择 不 同 的 实现 方式 所 对 应 的 框 
架 实现 也 不 一 样 。 例 如 基于 MVVM 的 实现 和 基于 Virtual DOM 
的 具体 框架 实现 区 别 还 是 比较 大 的 。 





o 模板 演 染 机 制 。 这 对 实现 前 后 端 丹 容 泻 染 的 统一 性 来 说 比较 重 
要 。 刚 刚 也 重点 讨论 过 了 ， 关 键 的 不 同 点 主要 在 HIML 摘 述 和 
转化 方式 的 选择 上 面 ， 我 们 需要 保证 前 后 端 都 能 对 同一 套 异 板 
或 描述 语法 进行 识别 处 理 ， 生 成 前 后 端 各 目 能 处 理 的 结构 。 





o 构建 打包 。 同 一 套 代 码 基 于 前 后 端 场景 打包 完成 后 是 不 一 样 
的 ， 并 且 对 于 开发 者 来 说 需要 有 完整 的 模块 化 机 制 、 打 包 体 系 
和 不 同 的 输出 调试 目录 ， 方 便 业 务 层 上 的 开发 。 打 包 完 成 后 ， 
服务 端 实 现 逻 辑 和 前 并 实现 逻辑 也 应 该 分 开发 布 部 署 ， 也 可 以 
通过 在 直 出 层 Web 服 务 器 上 判断 来 选择 使 用 哪 种 方式 输出 。 也 
可 能 是 将 前 并 实现 的 逻辑 作为 移动 并 应 用 的 离线 包 发 布 ， 服 务 
端的 实现 逻辑 完成 直 出 层 的 View 模 板 泻 染 ， 这 样 更 易于 管理 。 








o ” 演 染 和 直 出 区 分 。 用 户 必 须 能 够 很 方便 地 选择 是 使 用 前 端 演 染 
的 方式 还 是 后 台 直 出 的 方式 ， 例 如 可 以 在 浏览 器 地 址 URL 后 面 
添加 render=1 参 数 来 区 分 ， 如 有 果 市 有 render 参 数 则 使 用 前 端 泻 
染 ， 同 时 进行 事件 绑 定 处 理 ， 否 则 默认 统一 使 用 后 端 直 出 的 方 
式 ， 前 端 不 演 染 数据 ， 只 做 事件 绑 定 处 理 。 这 样 就 可 以 很 灵活 
地 满足 更 多 的 应 用 场景 。 以 基于 数据 模板 的 前 后 端 同 构 的 实现 
方式 举例 ， 页 面 中 某 个 模块 的 泻 染 方式 实现 代码 如 下 。 








// 获取 URL 中 的 参数 
let getUrlParam = function(name) { 
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$) 
let r = window.1location.search.substr(1).match(reg); 
if (r != null) { 
return unescape(r[2]1); 
} 


return null; 


}; 


const component = new Component({ 
// 前 端 茶 个 具体 模块 泻 染 逻 辑 
init (data) { 
// 如 果 URL 中 带 有 render 参数 ， 则 使 用 前 端 模 板 演 染 的 方 : 
If (getUrlParam('render')) { 

















this._renderData(data); 
} 


this. bindEvent(); 
上 


_renderData (data) { 
// 调用 模板 演 染 数据 
this.$el.html(renderTpl({data: data})); 

}, 

_bindEvent(){ 
// T0D0S， 页 面 事件 绑 定 








}); 





以 上 为 前 后 端 同 构 实现 的 主要 内 容 ， 相 信 大 家 对 同 构 的 三 种 主要 实 
现 方 式 的 原理 也 比较 清楚 了。 实现 同 构 的 形式 很 姑 活 ， 通 常 不 只 是 我 们 
知道 的 某 一 类 框架 实现 的 方式 ， 所 以 我 们 可 以 结合 更 多 实际 场景 来 灵活 
选择 。 











从 前 端 开 发 者 的 角度 来 看 ， 使 用 Node 进 行 服务 器 端 开发 的 场景 有 很 
多 ， 但 主要 还 是 以 使 用 Node 作 为 服务 直 出 层 最 为 典型 。 这 一 节 主 要 束 后 
端 直 出 、 前 后 并 同 构 的 原理 进行 了 较 全 面 的 分 析 ， 实 际 项 目 中 我 们 可 以 
选择 借鉴 已 有 的 成 熟 解 决 方 案 ， 也 可 以 根据 自己 团队 的 特点 来 重新 设计 
和 实现 项 目 同 构 开发 整个 流程 中 的 具体 细节 。 








6.2” 跨 终 闪 设计 与 实现 
6.2.1 Hybrid 技术 趋势 


移动 互联 网 兴起 后 ， 智 能 移动 设备 出 现 ， 大 量 应 用 市 场 的 Native 应 
用 也 开始 涌现 。 随 大 第 一 波 移 动 端 互 联网 开发 浪潮 渐渐 平静 ， 各 类 
Native 应 用 开始 进入 有 序 更 新 迭代 的 阶段 。 人 们 对 移动 互联 网 需求 急剧 
增长 ，Native 应 用 快速 迭代 开发 的 需求 也 越 来 越 多 ， 但 是 现 有 Native 应 
用 的 开发 从 代 速度 依然 无 法 满足 市 场 快 速 变 化 的 需要 。 随 之 而 来 的 古 
HIML5 的 出 现 ， 它 允许 开发 者 在 移动 设备 上 快速 开发 网 页 端 应 用 ， 并 
让 移动 互联 网 应 用 开发 很 快 进 入 了 Native 应 用 、Web 应 用 、Hybrid 应 用 
并 存 的 时 代 。 关 于 Native 应 用 、Web 应 用 、Hybrid 恬 用， 相信 大 家 都 有 
所 了 解 ， 但 就 目前 的 行业 发 展现 状 来 看 ， 它 们 之 间 的 区 别 显然 也 有 了 一 
些 变化 ， 下 面 我 们 一 起 来 看 一 看 这 三 者 更 全 面 的 对 比 。 














Native 应 用 的 优点 

o 原生 系统 级 Native API 的 文 持 ， 如 访问 本 地 资源 、 相 机 API 等 
o 资源 在 打包 安装 时 生成 ， 节 省 用 户 使 用 时 的 流量 

o 可 针对 不 同 平台 特性 进行 用 户 体 验 优化 

o 运行 速度 快 、 性 能 好 ， 可 使 用 原生 Native 动 画 库 


Native 应 用 的 缺点 





o 开发 成 本 高 ， 兼 容 性 产 ， 尤 其 是 对 于 Android 机 型 


o 维护 成 本 高 ， 用 户 必 须 手 动 下 载 更 新 ， 历 史 版 本 也 需要 维护 





o 上 线 时 间 不 确定 ， 一 般 需 要 通过 应 用 商店 的 审核 





o 版 本 更 新 慢 ， 更 新 时 需要 用 户 重 新 下 载 安装 包 
o 应 用 界面 的 内 容 不 可 被 搜索 引擎 检索 
Web 应 用 的 优点 

o 开发 成 本 低 ， 使 用 前 端 开 发 技术 即 可 

o 路 平 台 和 终端 ， 基 于 浏览 器 或 webView 运 行 
o 部 署 方式 简单 、 快 捷 ， 无 需 用 户 安装 

o 用 户 总 能 访问 到 最 新 版 本 ， 友 代 速 度 快 

o 内 容 可 被 搜索 引擎 检索 

Web 应 用 的 缺点 

o 浏览 体验 无 法 超越 Native 应 用 











o 消息 推送 、 动 画 等 实现 方式 相对 Native 实 现 方式 较 差 

o 不 能 调用 设备 的 原生 特性 ， 如 无 法 访问 本 地 资源 、 相 机 API 等 
Hybrid 应用 的 优点 

o 开发 成 本 较 低 ， 可 以 使 用 前 端 开发 技术 ， 甚 至 可 以 自动 添加 





Native 外 学 来 实现 独立 移动 端 应 用 
o 路 平台 和 终端 ， 内 容 网 页 可 基于 浏览 喜 或 WebView 运 行 
o 拥有 与 Web 应 用 相同 的 快速 迭代 特性 
o 部 普 方 式 简单 、 快 捷 ， 只 更 新 Web 资 源 即 可 
o 可 文 持 实 现 离 线 应 用 


o 可 通过 JSBridge 调 用 设备 的 系统 级 API， 如 访问 本 地 资源 、 相 机 


API 等 
o 原生 应 用 版 本 人 迭 代 和 Web 功 能 迭代 相互 独立 也 可 以 相互 结合 
o 不 同性 能 需求 的 功能 可 以 选择 性 使 用 Native 或 Web 实 现 
o 内 容 可 被 搜索 引擎 检索 
o 借助 于 MNV* 的 开发 模式 可 以 更 接近 Native 应 用 的 用 户 体 验 
Hybrid 应 用 的 缺点 
o ”部 分 机 型 兼容 相对 Native 较 差 ， 但 比 Web 应 用 体验 好 很 多 


显然 ， 目 前 Hybrid 应 用 的 开发 模式 也 已 经 突破 了 开发 效率 和 性 能 的 
两 大 问题 ， 更 加 适应 移动 互联 网 时 代 产 品 遍 欠 代 速度 的 需求 ， 而 且 目 前 
主流 的 移动 端 应 用 均 是 采用 Hybrid 的 方式 来 实现 的 ， 所 以 为 什么 使 用 
Hybrid 束 不 言 而 喻 了 。 下 面 我 们 直接 来 看 一 下 Hybrid 应 用 开发 的 几 种 常 
见 实现 技术 。 











6.2.2 ”Hybrid 实现 方式 





相 比 Native 原 生 应 用 开发 ，Hybrid 应 用 开发 的 方式 就 比较 多 了 ， 我 
们 先 来 看 看 以 前 问 开 发 实现 为 主 的 Hybrid 开发 方式 。 


以 前 端 为 主 的 Hybrid 实现 方式 





这 种 方法 是 以 完全 的 前 端 模 式 来 开发 整个 应 用 的 ， 页 面 开 发 完成 
后 ， 通 过 工具 自动 打包 将 前 端 资源 目录 装 入 Native 容 器 中 运行 ， 如 图 6-9 
所 示 ， 打 开 应 用 运行 时 ， 除 了 部 分 通用 的 简单 还 辑 外 ， 内 部 逻辑 全 部 由 
打包 的 Web 端 代码 来 实现 。 在 以 Apache Cordova 为 基础 的 开发 工具 实现 
下 ， 前 端 开 发 者 不 需要 了 解 Native 相 关 的 内 容 ， 只 需要 专注 于 前 端 页 面 
功能 的 开发 即 可 ， 功 能 开发 完成 后 自动 将 前 端 内 容 统 一 打包 进发 布 安装 
包 ， 安 装 时 解压 到 移动 端 本 地 目录 加 载运 行 。 

















这 种 思路 比较 简单 ， 通 常 借助 框架 即 可 实现 ， 而 且 成 本 很 小 。 其 优 
势 是 前 端 开发 者 可 以 独立 快速 构建 Hybrid 应 用 ， 不 需要 Native 开 发 人 员 
的 文 持 ， 前 端 调 用 Native 的 解决 方案 也 可 以 使 用 开源 的 JSBridge 库 (如 
cordova.js 等 ) 来 实现 。 但 是 这 种 方式 缺点 也 很 明显 : Native 功 能 的 实现 
只 能 通过 Web 的 方式 ， 并 且 无 法 添加 复杂 的 Native 功 能 ， 如 果 遇 到 即时 
通讯 或 服务 问 推 送 的 的 应 用 场景 ， 使 用 Web 的 方式 实现 性 能 就 比较 差 ; 
与 Native 的 交互 方式 上 也 会 受到 固有 开源 库 实现 的 限制 ， 无 法 灵活 扩 
展 ; 无 法 避免 在 应 用 版 本 更 新 时 需要 重新 下 载 安装 应 用 的 问题 ; 
WebView 性 能 局 限 ， 所 有 的 功能 还 辑 都 是 在 WebView 中 实现 的 ， 在 页 面 
复杂 情况 下 性 能 比较 慢 ， 移 动 端 应 用 的 WebView 执 行 性 能 只 有 移动 端 浏 
览 器 性 能 的 /3~ 14， 而 移动 问 浏 览 器 本 身 的 解析 区 相对 较 慢 。 所 以 这 


种 实现 方式 适合 于 中 小 型 需要 快速 完成 开发 的 应 用 场景 ， 如 果 是 在 用 户 
量 较 多 、 实 时 性 有 要求 较 高 、 应 用 需要 快速 持续 迭代 或 者 需要 与 扩展 
Native 功 能 结合 的 应 用 场景 中 ， 束 不 适用 了 。 
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图 6-9 ”以 Web 内 容 为 主 的 Hybrid 实 现 方 式 


所 以 如 果 是 应 用 复杂 、 功 能 较 多 、 需 要 快速 迭代 更 新 的 情况 下 ， 还 
是 建议 使 用 自 定制 Native 和 Web 结 合 的 Hybrid 开发 方式 来 组 建 应 用 。 


Native 和 Web 结 合 的 Hybrid 方式 





这 里 说 的 Native 和 Web 结 合 的 意思 主要 是 指 移动 端 应 用 中 Native 和 
Web 功 能 上 的 结合 开发 实现 ， 为 什么 需要 这 样 做 呢 ? 通常 在 一 个 完整 的 





移动 端 Hybrid 应 用 中 ， 功 能 是 由 核心 Native 功 能 和 Web 站 点 页 面 组 成 
的 ， 其 中 Web 站 点 页 面 中 可 以 调用 Native 功 能 。 此 外 ，Native 和 Web 的 功 
能 通常 也 不 一 样 ， 实 现 自己 最 擅长 的 功能 。 例 如 Native 束 可 以 用 来 实现 
移动 端 应 用 的 通用 导航 菜单 、 系 统 UI 层 、 核 心 界面 动 效 、 默 认 访 问 界 
面 、 高 效 的 消息 推送 或 APP 大 版 本 的 应 用 更 新 等 ， 因 为 这 些 功能 一 般 比 
较 稳 定 ， 变 化 不 大 ， 而 且 不 涉及 需要 快速 迭代 的 业务 逻辑 。 而 Web 端 则 
可 用 来 实现 开发 欠 代 速度 更 快 的 相关 业务 层 界 面 逻辑 ， 它 很 可 能 是 某 个 
Native 应 用 内 关联 的 某 个 Web 轻 应 用 。 








图 6-10 为 某 个 文 付 应 用 APP 的 设计 流程 ， 进 行 网 上 商城 购买 商品 时 
的 功能 业务 最 好 用 Web 方 式 实 现 ， 如 APP 应 用 导航 或 支付 流程 等 部 分 的 
界面 就 应 该 用 Native 来 做 。 通 过 这 种 方式 ， 可 以 保证 关键 性 功能 页 面 流 
程 的 用 户 体 验 和 Web 轻 应 用 的 快速 和 迭 代 开 发 ， 更 符合 现代 移动 端 应 用 的 
实现 标准 ， 目 前 国内 一 线 互 联网 企业 的 移动 端 核心 业务 实现 方案 也 都 是 
使 用 这 种 结合 方式 来 实现 的 。 


购买 商城 等 Web 页 面 






依赖 WebView 运 行 


WebView 


前 端 与 Native 交 互 Native 核 心 功能 


Native 导 航 、 





调用 运行 


Native 运 行 库 与 运行 环境 








图 6-10 ”典型 支付 APP 设 计 实 现 


需要 注意 的 是 ， 使 用 这 种 开发 模式 首先 要 非常 关注 开发 过 程 中 Web 
和 Native 的 调用 接口 规范 问题 ， 因 为 这 种 情况 下 我 们 一 般 不 会 借助 开源 
的 交互 实现 方案 ， 所 以 自己 如 何 去 设 计 Web 和 Native 的 交互 协议 就 显得 
很 重要 了 。 本 书 第 二 章 第 五 节 癌 大 家 详细 介绍 了 使 用 JavaScript 与 Native 
交互 的 协议 与 规范 ， 目 前 一 般 的 解决 方式 就 是 通过 JSBridge 协 议 在 Web 
页 面 中 调用 Native 功 能 。 有 关 协 议 的 设计 规范 和 实现 可 以 去 参考 此 章节 
内 容 的 介绍 ， 这 里 就 不 再 继续 展开 了 。 








6.2.3 ”基于 localSstorage 的 资源 离线 和 


更 新 扩 术 


介绍 完 Hybrid 应 用 的 实现 方式 ， 我 们 再 来 重点 看 看 Hybrid 应 用 上 前 
端 资源 离线 和 更 新 的 问题 。 在 Hybrid 应 用 开发 时 ， 常 常 需 要 在 离线 的 情 
况 下 打开 页 面 或 者 为 了 让 Hybrid 页 面 应 用 加 载 启 动 更 快 ， 避 免 长 时 间 等 
待 资源 加 载 过 程 中 造成 页 面 空白 的 出 现 。 因 此 我 们 必须 要 考虑 使 用 资源 
的 离线 缓存 技术 来 加 快 页 面 启动 时 的 载 入 速度 了 。 而 且 现 代 浏 览 器 也 提 
供 了 一 些 页 面 上 静态 资源 文件 级 绥 存 与 更 新 的 方式 ， 下 面 我 们 就 来 看 一 
下 Hybrid 应 用 中 实现 Web 端 资源 离线 与 更 新 的 可 行 方案 都 有 哪些 。 














ServiceWorker 的 资源 离线 与 更 新 





在 第 一 章 第 二 节 中 我 们 了 解 了 可 以 通过 浏览 器 Application ” Cache 的 
方式 实现 页 面 资源 的 离线 加 载 和 更 新 。 但 这 里 需要 注意 的 是 ， 
Application ” Cache 这 种 方案 目前 开始 被 浏览 器 标准 弃 用 了 ， 取 而 代 之 的 
是 ServiceWorker 这 种 离线 技术 实现 机 制 。 前 面 章节 中 我 们 对 
ServiceWorker 也 进行 了 具体 分 析 ， 这 里 仍 要 注意 目前 ServiceWorker 的 浏 
唤 器 莱 容 性 支持 很 差 ， 导 致 这 种 方案 目前 还 不 成 熟 ， 或 者 说 在 短期 内 仍 
不 是 一 个 可 行 的 实践 方案 。 











localStorage 资 源 离线 绥 存 与 更 新 


当然 除了 这 种 未 来 可 能 使 用 的 ServierWorker 解 决 方案 ， 目 前 实现 前 
端 离线 缓存 一 种 比较 简单 高 效 的 方法 束 是 使 用 localStorage。 早 期 的 离线 
资源 缓存 通常 也 是 使 用 这 种 方式 来 实现 的 ， 而 且 国 内 几 个 大 型 互联 网 企 














业 的 前 端 团队 在 移动 端 资源 离线 化 方面 都 曾经 尝试 过 这 种 方法 ， 其 基本 
思路 是 将 JavaScript、CSS 资 源 文件 甚至 是 接口 返回 的 数据 资源 绥 存 到 浏 
唤 器 的 localStorage 中 ， 下 次 打开 页 面 时 不 进行 JavaScript 和 和 CSS 资源 的 请 
求 ， 而 是 直接 通过 localStorage 读 取 内 容 ， 然 后 插入 到 页 面 中 解析 执行 。 

这 里 需要 注意 的 是 ， 为 了 判断 是 加 载 线 上 静态 资源 还 是 从 localStorage 中 
读 取 资源 ， 页 面 中 JavaScript 和 CSS 资 源 的 加 载 方式 通常 都 是 动态 创建 标 
签 加 载 或 通过 eval 执 行 的 ， 而 且 通 常 只 有 页 面 在 第 二 次 打开 或 之 后 加 载 
静态 资源 的 情况 才 可 能 从 localStorage 中 读 取 。 下 面 是 使 用 localStorage 绥 
存 读 取 JavaScript 资 源 的 一 个 简单 实现 。 











<!-- 服务 器 最 新 的 版 本 可 以 在 最 新 的 html 文件 中 写 入 --> 


<div id="versiontStore" data-version="1.4"></div> 


<script> 
let ScriptPath = 'server/path/", 
Script = document.createElement('script"), 
newVersion = document.getElementbyId('versiontStore').getAtti 


oldVersion = localStorage.getIitem('version') 


/* 如 果 有 版 本 更 新 或 者 本 地 没有 缓存 ， 则 请 求 新 的 JavaScript 内 容 插入 到 页 面 中 执 
localStorage */ 

















if(newVersion > (oldVersion || 0)){ 
$.ajax({ 
url: ‘${scriptPpPath}main.${newVersion}.js ， 
type: 'get', 
dataType: 'text', 


success: function(content)t{ 


Script,.innerHTML = content; 
document .appendCchild(script); 
// 更 新 lJocalStorage 静态 资源 内 容 

















_UupdateLocalstorage(scriptPath, content); 


}); 
}elsef 
/* 如 果 有 缓存 且 未 更 新 ， 则 直接 读 取 缓存 内 容 */ 


script.innerHtml = localStorage.getIitem(scriptPath); 





document .appendCchild(script); 
} 


</script> 


这 是 个 简单 的 例子 ， 在 加 载 文 件 时 ， 页 面 新 的 版 本 号 已 经 写 到 
HTML 页 面 上 或 者 通过 单独 的 接口 请 求 获取 ， 页 面 脚本 通过 获取 页 面 上 
的 最 新 版 本 号 和 本 地 ]ocalStorage 保 存 的 旧版 本 号 进行 对 比 ， 如 果 本 地 没 
有 版 本 号 或 版 本 号 较 旧 ， 则 加 载 最 新 版 本 的 静态 资源 文件 到 页 面 上 ， 同 
时 更 新 本 地 原 有 的 localStorage 绥 存 内 容 和 版 本 号 ， 人 否则 直接 读 取 
localStorage 的 静态 资源 内 容 到 页 面 中 解析 执行 ， 基 本 的 实现 流程 如 图 6- 
11 所 示 。 











这 种 实现 方式 的 好 处 是 比较 简单 ， 不 需要 服务 端 和 移动 客户 端 平 台 
的 文 持 ， 可 以 实现 纯 移 动 端 应 用 的 离线 访问 。 当 然 缺 点 也 很 明显 : 首先 
localStorage 的 大 小 有 限制 ( 同 域 一 般 认为 是 5M 以 内 ) ， 同 域名 的 
localStorage 存 储 的 离线 资源 较 多 时 很 可 能 会 内 容 超 出 ， 容 易 出 错 ， 需 要 
通过 资源 蔡 换 策略 来 处 理 ， 这 样 束 比较 胀 烦 ; 其 次 是 用 户 如 果 手 动 清 空 
localStorage 会 使 离线 资源 失效 ， 这 个 问题 基本 上 不 能 解决 ， 还 有 就 是 读 





取 localStorage 的 速度 其 实 是 比较 慢 的 ， 巨 其 在 移动 端 ， 如 果 localStorage 
的 内 容 较 多 ， 返 回 的 速度 可 能 会 比较 慢 。 


当然 ， 使 用 这 种 方式 是 可 以 解决 一 部 分 问题 的 。 例 如 Hybrid 应 用 的 
页 面 通 过 分 享 到 社交 平台 打开 的 情况 下 ， 如 果 用 户 是 第 二 次 打开 这 个 页 
面 ， ee 快 页 面 的 载 入 速度 。 因 此 在 快速 实现 离 
线 缓存 的 方式 上 ， 这 是 一 种 很 简易 实用 的 方法 。 我 们 再 来 看 看 这 种 情况 
下 ， 应 该 如 何 实现 ee 的 更 新 。 








加 载 HTML 


读 取 最 新 版 本 号 和 本 
地 版 本 号 







读 取 localStorage 静 态 
资源 并 加 载 执 行 


请 求 静态 资源 文件 并 加 
载 执 行 


更 新 缓存 内 容 和 本 地 版 
本 号 





图 6-11 移动 端 常见 页 面 结构 


基于 增 量 文件 的 更 新 方式 


在 上 述 资源 访问 和 更 新 的 过 程 中 ， 当 静态 资源 改变 时 ， 如 采 像 上 面 





那样 每 次 都 进行 新 文件 的 全 量 更 新 也 不 是 不 可 以 ， 很 直接 、 易 实现 。 但 
问题 是 ， 即 使 我 们 修改 了 代码 中 的 一 个 字符 或 语句 ， 就 要 更 新 整个 静态 
资源 文件 。 所 以 为 了 节省 流量 可 以 选择 增 量 文件 更 新 的 方式 。 








要 实现 增 量 文件 的 更 新 需要 做 更 多 的 事情 。 如 图 6-12 所 示 ， 假 如 之 
前 已 经 有 1.1、1.2、1.3 三 个 版 本 的 脚本 资源 发 布 ， 而 且 目 前 使 用 各 个 版 
本 的 用 户 都 存在 ， 现 在 1.4 版 本 的 离线 资源 文件 上 传 发 布 后 ， 为 了 满足 
不 同 版 本 用 户 的 增 量 更 新 ， 需 要 根据 前 面 三 个 版 本 的 文件 内 容 与 最 新 版 
本 内 容 进行 对 比分 析 ， 分 别 生 成 三 个 不 同 版 本 的 增 量 文件 1.1-1.4.js、 
1.2-1.4.js、1.3-1.4.js， 同 时 还 需要 保留 1.4 版 本 的 全 量 文件 。 此 时 服务 器 
上 1.4 版 本 发 布 后 就 保留 了 四 个 不 同 的 文件 :1.4 版 本 文件 、 相 对 于 1.1 版 
本 的 增 量 文件 、 相 对 于 1.2 版 本 的 增 量 文件 、 相 对 于 1.3 版 本 的 增 量 文 
件 。 新 用 户 进 入 页 面 应 用 后 直接 拉 取 1.4 版 本 文件 即 可 ， 前 三 个 版 本 的 
用 户 拉 取 的 则 分 别 是 三 个 不 同 的 增 量 文件 。 这 样 不 同 版 本 的 用 户 就 可 以 
增 量 更 新 到 不 同 的 内 容 了 ， 上 一 个 例子 的 实现 代码 就 可 以 如 下 编号 了 。 


























图 6-12 ” 增 量 文件 版 本 发 布控 制 





<!-- 服务 器 最 新 的 版 本 可 以 在 最 新 的 html 文件 中 写 入 --> 


<div id="versiontStore" data-version="1.4"></div> 


<script> 

let ScriptPath = 'server/path/main.js'; 

let Script = document.createElement('script'); 

let newVersion = document.getElementbyId('versiontStore').getAtti 


let oldversion = localStorage.getItem('version'); // 获取 旧 的 版 本 号 


if(oldVersion && newVersion > oldVersion)t{ 








/* 如 果 本 地 有 缓存 ， 且 有 版 本 更 新 ， 则 请 求 新 的 对 应 版 本 的 增 量 文件 ， 然 后 进行 + 











容 保 存 到 本 地 localStorage*/ 
$.ajax({ 
url: ‘${scriptPath}${0ldVersion}-${n 
type: 'get', 
dataType: 'text', 


success: function(content)t{ 








ewVersion}.js ， 








// 根据 增 量 文件 内 容 和 当前 内 容 计算 新 的 前 








a 








了 区 


lmlm 


content = _calculate(content, localStorage.getIitem(sc 


Script,.innerHTML = content ; 
document .appendCchild(script); 
// 更 新 JocalStorage 静态 资源 内 容 

















_UupdateLocalstorage(scriptPath, 


}); 
}else if(!'!oldVersion)t{ 


// 本 地 没有 缓存 则 直接 获取 最 新 全 量 文件 
$.ajax({ 








url: ‘${scriptPath}main.${newVersion 

type: 'get', 

dataType: 'text', 

success: function(content)t{ 
script.innerHTML = content ; 
document .appendChild(script); 
// 更 新 localStorage 静态 资源 内 容 

















_UupdateLocalstorage(scriptPath, 


content ); 


}.J]s ， 


content ); 


了 ) 
}elsef 
// 如 果 有 缓存 且 没 有 版 本 更 新 ， 则 直接 读 取 缓存 内 容 


script.innerHtml = localStorage.getIitem(scriptPath); 








document .appendChild(script); 
} 


</script> 


通过 比较 不 同 版 本 残 可 以 只 加 载 不 同 版 本 的 增 量 文件 ， 但 同时 需要 
在 服务 嚣 端 每 次 新 版 本 发 布 时 维护 多 个 增 量 文件 来 适应 不 同 的 旧版 本 更 
新 的 需要 。 人 至 于 如 何 根据 两 个 新 旧版 本 的 文件 生成 字符 级 的 增 量 文件 ， 
这 就 是 我 们 下 面 要 继续 讨论 的 内 容 了， 目前 主要 有 两 种 基本 的 算法 来 实 
现 这 一 过 程 。 











基于 文件 代码 分 炭 的 增 量 更 新 机 制 


这 种 思路 是 基于 代码 文件 分 块 更 新 的 增 量 算法 ， 如 图 6-13 所 示 ， 
main.1.3.js 的 文件 字符 串 由 几 个 字符 串 块 连 接 组 成 ，chunk1-chunk2- 
chunk3-chunk4《〈 每 个 chunk 代 表 分 割 后 不 同 的 代码 字符 串 ) ， 此 时 需要 
在 chunk1 和 chunk2 之 间 添 加 datal，chunk3 的 内 容 被 修改 成 了 chunk5， 
chunk4 的 块 被 删除 。 新 的 代码 文件 字符 串 应 该 为 chunk1-datal-chunk2- 
chunk5。 为 了 解决 这 个 问题 ， 我 们 用 一 种 描述 规则 来 表示 每 个 代码 文件 
块 的 变化 ， 比 如 使 用 原 有 的 序号 1 表示 原来 chunk1 的 内 容 不 变化 ， 加 入 
datal 块 内 容 表示 插入 的 新 内 容 ，-4 表 示 删 除 chunk4 的 文件 块 ， 那 么 就 可 
以 用 数组 [1， datal， 2， chunk5,-4] 来 表示 新 的 增 量 文件 了 ， 具 体 表示 : 
chunk1 未 修改， 后 面 拼接 datal，chunk2 未 修改 ，chunk3 被 移 除 ， 后 面 拼 
接 chunk5，chunk4 被 移 除 掉 。 当 浏览 器 下 载 到 带 有 这 个 版 本 的 增 量 文件 

















时 ， 就 会 在 前 一 版 本 的 代码 文件 字符 串 上 根据 这 个 规则 修改 ， 得 到 更 新 
后 的 静态 资源 文件 字符 串 内 容 并 重新 写 入 到 ]ocalStorage 中 。 


ey ” 


a 2 了 


图 6-13 ”基于 分 块 的 增 量 文件 算法 思路 








我 们 再 来 看 一 个 具体 的 例子 ， 新 旧 两 个 版 本 的 JavaScript 文 件 压 缩 后 
上 线 的 代码 字符 捉 分 别 为 leta=1;alert(a); 和 let a=1;alert(a+1); ， 我 们 根 
据 块 大 小 为 4 个 字符 来 分 割 ， 可 以 得 到 如 图 6-14 所 示 的 表示 ， 所 以 计算 
获取 的 增 量 内 容 描 述 为 [1,2,3,t (a+','1); ]。 这 种 方式 在 代码 较 多 的 情 
况 下 就 可 以 用 块 序号 来 描述 不 变 的 代码 块 ， 减 小 增 量 文件 大 小 ， 达 到 市 
省 流量 的 目的 。 


main. 1. 3. js d=1s aler t (a) ; 


汪 - > 9 


ee He . 
































图 6-14 ”基于 分 块 的 增 量 文件 算法 案例 





基于 编辑 距离 的 增 量 更 新 机 制 





前 一 种 方法 是 基于 文件 内 容 分 块 chunk 算 法 来 进行 增 量 更 新 的 ， 节 
省 资源 的 量 取决 于 块 的 大 小 和 内 容 变 化 的 块 序号 分 布 ， 比 如 每 个 块 中 都 
只 更 新 了 一 个 人 字符， 那么 仍然 需要 下 载 这 个 文件 的 所 有 块 内 容 。 而 根据 
编辑 距离 算法 增 量 更 新 的 方式 束 可 以 真正 做 到 字符 级 别 的 更 新 了 。 








1965 年 俄罗斯 科学 家 Vladimir Levenshtein 提 出 了 Levenshtein 
Distance (编辑 距离 ， 相 关 算 法 的 实现 内 容 比较 多 ， 有 兴趣 可 以 参考 其 
他 资料 ) 的 概念 ， 它 指 的 是 从 一 个 字符 串 变 换 到 男 一 个 字符 串 所 需要 的 
最 少 变 化 操作 步骤 。 那 如 果 能 计算 获取 两 个 文件 对 比 变 化 时 每 个 字符 的 
操作 步骤 ， 惑 可 以 将 操作 步骤 作为 增 量 文件 下 载 ， 然 后 在 浏览 器 端 进行 
代码 的 运算 更 新 了 。 不 过 这 种 情况 对 于 少量 的 字符 更 新 很 有 用 ， 如 果 一 
次 更 新 的 内 容 很 多 ， 生 成 的 增 量 文件 很 有 可 能 比 源 文 件 还 大 ， 所 以 实际 
使 用 过 程 中 需要 结合 具体 情况 在 这 两 种 增 量 算法 实现 中 进行 选择 。 














6.2.4 ”基于 Native 与 Web 的 资源 离线 
和 更 新 技术 


Native 和 Web 结 合 的 Hybrid 资源 离线 与 更 新 





接 下 来 介绍 另 一 种 Hybrid 应 用 上 的 离线 实现 机 制 ， 与 IocalStorage 上 
实现 文件 资源 离线 的 方式 不 同 的 是 ， 在 这 种 Native 和 Web 绪 合 的 Hybrid 








开发 模式 下 ，Web 端 的 代码 资源 是 通过 离线 包 的 方式 发 布 到 服务 端 静 态 
目录 上 的 ， 同 时 主 站 点 会 保存 一 个 线 上 的 前 端 页 面 实现 供 浏览 右 直 接 加 
载 使 用 。 


如 图 6-15 所 示 ， 通 第 Native 应 用 局 动 时 会 主动 拉 取 线 上 Web 离 线 包 
版 本 ， 然 后 与 本 地 保存 的 版 本 进行 对 比 ， 如 果 没 有 更 新 则 不 做 操作 ;， 如 
果 本 地 的 离线 包 需 要 更 新 或 者 本 地 没有 离线 包 ， 则 会 去 离线 包 服 务 器 拉 
取 最 新 的 离线 包 或 者 拉 取 增 量 离线 包 到 本 地 ， 然 后 解压 合并 a 到 本 地 的 指 
定 离 线 包 目 录 下 。 当 有 用 户 访 问 目标 页 面 时 ，Native 应 用 会 先 检 查 该 文 
件 地 址 映射 到 的 离线 包 本 地 目录 中 的 文件 ， 如 果 离 线 包 目录 有 内 容 ， 则 
直接 读 取 离 线 包 目录 的 文件 加 载 ， 否 则 线 上 拉 取 静态 资源 到 页 面 上 解析 
执行 ， 同 时 通知 Native 应 用 去 拉 取 最 新 的 离线 包 资 源 ， 这 样 当下 一 次 继 
续 请 求 目 标 页 面 时 WebView 就 可 以 读 取 到 本 地 离线 目录 中 的 内 容 了 。 这 
也 就 是 为 什么 通常 我 们 拉 取 到 的 新 离线 包 需 要 在 下 一 次 访问 才 生 效 的 原 
因 。 另 外 ， 对 于 离线 包 的 更 新 检查 时 机 ， 也 有 的 应 用 设计 是 在 打开 目标 
页 面 时 ， 无 论 是 售 加 载 到 离线 内 容 ， 都 会 去 检测 是 售 下 载 新 的 离线 包 资 
源 。 





























前 端 离线 包 的 生成 比较 简单 ， 一 般 是 通过 构建 工具 将 站 点 资源 目录 
直接 压缩 ， 在 发 布 前 端 页 面 与 静态 资源 的 同时 上 传 离线 包 到 服务 器 或 
CDN 上 。 这 里 怖 要 注意 的 是 ， 为 了 保证 移动 端 应 用 每 次 尽 可 能 拉 到 较 小 
的 离线 包 内 容 ， 上 传 服务 器 端 离线 包 时 也 需要 生成 与 之 前 版 本 对 比 的 增 
量 更 新 包 发 布 到 服务 需 或 CDN 上 的 。 








增 量 包 的 计算 方法 与 localStorage 的 增 量 文件 计算 方法 类 似 ， 如 图 6- 
16 所 示 ， 假 如 有 1.1、1.2、1.3 三 个 版 本 的 离线 包 ， 当 1.4 版 本 的 离线 包 上 
传 后 ， 需 要 对 比 前 面 三 个 版 本 的 离线 包 内 容 分 别 生成 三 个 不 同 版 本 的 新 
增 量 包 ， 同 时 保留 1.4 版 本 的 全 量 离线 包 。 此 时 服务 器 上 1.4 版 本 发 布 后 





就 存在 四 个 离线 包 : 1.4 版 本 全 量 包 、 相 对 于 1.1 版 本 的 增 量 包 、 相 对 于 
1.2 版 本 的 增 量 包 、 相 对 于 1.3 版 本 的 增 量 包 。 这 样 新 用 户 进 入 应 用 会 直 
接 拉 取 1.4 版 本 全 量 离线 包 、 前 三 个 版 本 的 用 户 拉 取 的 则 分 别 是 三 个 不 
同 的 增 量 包 。 这 样 不 同 版 本 的 用 户 更 新 就 没有 问题 了 。 至 于 如 何 根据 两 
个 离线 包 计 算 增 量 包 的 算法 也 和 计算 差 量 文件 的 算法 类 似 ， 既 可 以 根据 
增 量 包 内 每 个 文件 资源 的 增 量 文件 来 计算 ， 计 算 方法 和 localStorage 实 现 
增 量 文件 的 方法 类 似 ， 也 可 以 通过 直接 针对 压缩 包 文 件 二 进 制 数据 内 容 
分 块 进行 对 比 的 增 量 方法 来 实现 。 


答 ee 


7 | 术 寅 红 
a 解压 合并 目录 | 检测 目录 


















加 载 线 上 站 ;有 离线 内 容 
0 是 否 有 离线 内 容 





读 取 本 地 离 
线 资 源 





图 6-15” 增 量 包 更 新 机 制 


增 量 文件 





图 6-16 ” 增 量 包 产生 算法 











到 此 ， 离 线 包 的 运行 思路 已 经 分 析 完 了 。 很 多 情况 下 ， 尤 其 是 在 大 
的 互联 网 公司 中 ， 这 些 内 容 基 本 是 后 问 或 之 前 的 同学 已 经 设计 好 的 ， 但 
征 我 们 也 要 理解 ， 如 果 是 目 己 搭建 实现 这 个 流程 的 话 ， 各 个 环节 应 该 怎 
样 去 做 ， 这 是 很 重要 的 。 


7、 HEEB 27 » 
6.2.5 ”资源 履 新 率 统 计 
上 面 讲 到 ， 既 然 有 了 前 端 资源 的 离线 和 更 新 机 制 ， 那 就 要 考虑 在 每 


次 新 资源 包 发 布 后 统计 新 版 本 的 更 新 上 覆 瘟 率 。 这 和 没有 离线 的 时 候 是 有 
区 别 的 ， 前 端 发 布 的 新 版 本 常常 会 在 用 户 拉 取 到 线 上 新 版 本 资源 后 的 第 











二 次 访问 时 才 生 效 ， 那 么 在 新 的 资源 发 到 服务 器 上 后 ， 用 户 客 户 端 里 面 
可 能 仍 会 存在 旧版 本 的 运行 代码 逻辑 ， 这 就 需要 知道 有 多 少 用 户 已 经 更 
新 到 了 新 的 版 本 。 在 增 量 包 的 生成 过 程 中 ， 如 果 某 个 旧版 本 的 用 户 使 用 
率 已 经 很 小 ， 或 者 基本 接近 0， 那 我 们 束 可 以 考虑 后 面 不 再 对 这 个 版 本 
生成 增 量 包 ， 并 让 这 部 分 用 户 直 接 拉 取 最 新 的 全 量 包 ， 避 免 在 版 本 发 布 
较 多 时 线 上 有 过 多 的 历史 增 量 包 版 本 存在 。 因 此 ， 统 计 离线 包 资 源 履 兰 
率 是 很 有 意义 的 。 





统计 的 方法 很 多 ， 一 个 简 蛙 可 行 的 方式 束 是 后 台 统 计 上 报 版 本 写 。 
为 了 更 加 直接 地 体现 版 本 分 布 的 情况 ， 我 们 可 以 忽略 用 户 量 上 的 统计 ， 
直接 对 访问 量 进行 计算 。 在 发 布 了 新 版 本 后 ， 每 次 PV 统计 时 带 上 版 本 
号， 最 后 根据 PV 中 的 版 本 号 来 统计 访问 不 同 版 本 上 用 户 的 分 布 情况 。 

















图 6-17 显 示 了 根据 PV 中 的 版 本 信息 计算 得 到 目前 五 个 版 本 的 大 致 用 
户 比 例 。 对 于 1.0 版 本 ， 由 于 用 户 的 使 用 比例 已 经 较 小 ， 可 以 考虑 让 这 
部 分 用 户 拉 取 离 线 包 信 息 时 直接 获取 最 新 的 离线 包 资 源 ， 而 且 后 面 的 新 
版 本 发 布 将 不 再 对 1.0 版 本 生成 新 的 增 量 包 。 需 要 注意 的 是 ， 新 版 本 覆 
盖 率 可 能 出 现 不 同 的 分 布 ， 例 如 今天 统计 的 新 版 本 歼 盖 率 比 昨天 还 要 
低 ， 这 是 很 正常 的 ， 因 为 很 多 新 的 用 户 在 今天 的 访问 量 减少 ， 而 老 用 户 
访问 较 多 ， 但 是 整体 上 新 版 本 歼 盖 率 是 会 呈现 不 断 上 升 然后 开始 下 降 的 
趋势 ， 我 们 通常 将 某 版 本 以 上 的 履 盖 率 总 和 超过 95% (当然 这 个 值 根据 
不 同业 务 的 场景 可 以 自己 定义 ， 而 且 尽 量 不 要 去 统计 单个 版 本 的 履 盖 率 
情况 ) 时 认为 是 该 版 本 歼 盖 完成 ， 而 将 该 版 本 发 布 时 起 到 该 版 本 以 上 版 
本 才 盖 率 总 和 超过 95% 的 这 段 时 间 称 为 离线 包 的 更 新 周期 。 





























通过 离线 包 徐 盖 京 的 统计 ， 我 们 可 以 很 清晰 地 了 解 之 前 版 本 的 用 户 
履 盖 情况 ， 也 有 助 于 进行 产品 的 完善 和 改进 。 


ti' 


版 本 1. 1 








版 本 1. 4 





图 6-17 增 量 包 统计 示例 


6.2.6 ” 仍 需 要 注意 的 问题 


离线 缓存 的 实现 能 够 解决 加 速 页 面 内 容 加 载 的 问题 ， 尺 管 如 此 ， 我 
们 依然 需要 注意 一 些 Hybrid 应 用 开发 时 的 其 他 问题 。 


Hybrid 性 能 问题 


了 解 过 Hybrid 之 后 ， 你 会 发 现 Hybrid 应 用 的 WebView 存 在 另 一 个 性 
能 问题 ，HTML 的 DOM 泻 染 和 操作 较 慢 。 需 要 注意 的 是 ， 这 里 所 说 的 慢 


是 相对 的 ， 是 Native 应 用 WebView 内 容 操作 相对 于 移动 端 浏览 占 的 内 容 
操作 来 说 的 ， 即 便 我 们 把 前 端 优化 做 到 极致 ，HIML DOM 的 运行 机 制 
较 慢 仍 是 不 可 改变 的 。 值 得 庆幸 的 是 ， 目 前 MNV 大 的 开发 模式 正在 改 
变 这 一 局 面 ， 前 面 也 讲 到 ， 它 允许 我 们 通过 JavaScript 来 调用 Native 的 原 
生 控 件 生成 界面 ， 并 能 尽量 接近 Native 应 用 的 性 能 ， 这 也 在 一 定 程度 弥 
补 了 Hybrid 应 用 内 容 泻 染 过 程 中 的 性 能 劣势 。 














前 端 技 术 栈 的 其 他 应 用 实现 


前 端 技术 栈 还 有 一 些 其 他 的 应 用 方式 ， 如 Native 编 译 技术 或 者 更 面 
应 用 开发 。 


Native 编 译 技术 指 的 是 使 用 前 端 技术 编译 生成 Native 应 用 开发 工 
程 ， 例 如 可 以 生成 Android 或 iDOS 原 生 项 目 工 程 ， 再 进行 二 次 开发 编译 打 
包 成 最 终 的 Native 客 户 端 版 本 。 前 端 技术 在 桌面 端 应 用 的 开发 场景 也 在 
不 断 增多 ， 有 一 些 相 对 较 成 熟 的 框架 和 相关 资料 ， 实 现 也 比较 人 简单， 有 
实际 需求 的 读者 可 以 去 答 试 一 下 。 





6.3 本章 小 结 


在 这 一 章 中 ， 我 们 同 大 家 介绍 了 前 端 技术 在 Node 端 和 客户 端的 应 
用 ， 主 要 包括 后 端 泻 染 、 前 后 端 同 构 、Hybrid App 离 线 技 术 与 统计 等 内 
容 。 党 所 这 些 将 有 利于 前 崩 工 程 师 应 对 更 多 的 应 用 场景 ， 在 更 复杂 的 业 
务 应 用 中 灵活 选择 实践 方案 。 到 此 为 止 ， 本 书 要 讲解 的 前 端 知识 内 容 已 
经 介绍 完毕 ， 在 下 一 章 中 ， 我 们 将 一 起 来 看 看 未 来 前 端 技术 的 发 展 趋势 
以 及 如 何 成 为 一 名 优秀 的 前 端 工程 师 。 











第 7 草 ”未 来 前 总 时 代 


到 了 这 里 ， 本 书 要 向 大 家 介绍 的 技术 内 容 基 本 就 讲解 完了 。 这 一 章 
我 们 再 一 起 来 展望 一 下 未 来 前 端 领域 可 能 的 发 展 情况 。 








就 前 端 主流 技术 框架 的 发 展 而 言 ， 其 过 去 几 年 发 展 极 快 ， 在 填补 了 
原 有 技术 框架 空白 和 不 足 的 同时 也 渐渐 趋 于 成 熟 。 未 来 前 端 在 已 经 趋同 
成 熟 的 技术 方向 上 面 将 会 慢 慢 稳定 下 来 ， 进 入 技术 迭代 优化 阶段 ， 例 如 
语言 标准 、 前 端 框 架 等 。 但 这 并 不 代表 前 端 领域 技术 就 此 稳定 了 ， 因 为 
新 的 技术 方向 已 经 出 现 ， 并 在 等 待 着 下 一 个 风口 的 到 来 。 那 么 什么 是 下 
一 个 风口 呢 ? 虚拟 现实 ?” 人 工 智 能 ? 还 是 其 他 的 什么 ? 不 管 未 来 如 何 ， 
就 前 端 应 用 开发 方向 来 讲 ，MVVM、Virtual DOM 和 同 构 的 技术 解决 方 
案 依然 会 延续 发 展 一 段 时 间 ， 而 且 这 段 时 间 内 前 端 框 架 技术 的 变化 将 不 
会 像 原 来 一 样 具 有 颠覆 性 。 














当 MVVM、YVirtual DOM 或 同 构 等 技术 实践 都 有 很 成 熟 高 效 的 框架 
和 方案 可 以 实现 时 ， 对 于 移动 端 应 用 ， 前 端 要 重点 发 展 的 下 一 步 可 能 就 
是 MNV 关 的 原生 NativeView 开 发 ， 例 如 使 用 通用 的 MNV 关 前 端 技 术 实 
现 方案 来 降低 移动 端 Native 和 前 端 Web 交 互 的 开发 成 本 ， 让 前 端 既 可 以 
通过 Native 编 译 开发 出 稳定 的 原生 应 用 外 过， 也 可 用 来 开发 快速 迭代 、 
高 性 能 的 移动 端 MNV* 应 用 ， 最 终 形成 一 套 移 动 端 高 效率 的 前 端 开发 生 
态 体 系 。 








为 一 方面 ， 新 领域 的 Web 化 思路 也 会 给 前 端 带 来 技术 章 新 和 发 展 机 


遇 ， 例 如 Web 虚 拟 现实 〈Virtual Reality，VR) 、 物 联网 〈Physical 
Web， 将 物体 连 入 网 络 的 一 种 理念 ) Web 化 、 网 站 人 工 智 能 等 ， 这 些 方 
癌 的 开发 者 早已 跃跃欲试 ， 目 前 国外 也 能 找到 少数 这 样 的 应 用 站 点 。 


7.1 未 来 采 病 趋势 


经 过 近 几 年 的 发 展 ， 现 代 前 端 已 经 革新 到 跨 端 、 跨 界面 的 阶段 ， 主 
流 以 基于 MVVM、Virtual DOM、 移 动 端 MNV 关 思路 和 前 后 端 同 构 技 术 
进行 开发 的 项 目 居 多 ， 实 现 的 方向 也 多 种 多 样 ， 这 些 在 前 面 对 应 的 章节 
中 均 有 讲 到 。 除 了 这 些 ， 关 于 未 来 还 有 一 些 是 我 们 前 端 工程 师 需 要 了 解 
的 ， 下 面 一 起 来 看 看 未 来 前 端 技术 具体 可 能 会 发 展 成 什么 样 。 


7.1.1 新 标准 的 进化 与 稳定 


前 端 新 标准 和 草案 在 不 断 更 新 ，HTML、CSS、JavaScript 标 准 也 在 
渐渐 完善 ， 尽 管 这 些 新 的 规范 最 终 会 淘汰 旧 标 准 ， 新 的 项 目 也 会 以 最 新 
的 标准 作为 开发 依据 ， 但 要 完全 停止 旧 标 准 的 使 用 并 完成 企业 级 旧 项 目 
的 升级 ， 依 然 需 要 一 段 时 间 。 例 如 原 有 CoffeeScript 的 项 目 不 可 能 一 次 性 
做 出 迁移 重 构 ， 我 们 的 项 目 仍 需要 维护 ， 不 能 脱离 实际 项 目 去 谈 技术 ， 
这 束 需 要 一 段 时 间 来 慢 慢 修改 ， 再 如 Web Component 也 不 会 马上 作为 唯 
一 标准 被 大 力 推 广 。 但 可 以 肯定 的 是 ， 新 的 语言 或 技术 标准 一 定 会 被 推 
广 使 用 ， 只 是 还 需要 时 间 。 


























同时 基于 标准 也 会 出 现 一 些 衍 生 的 脚本 语法 和 规范 来 适应 特定 的 应 
用 场景 ， 这 些 非 标准 的 规范 除了 解决 具体 业务 技术 问题 之 外 ， 极 有 可 能 
进化 成 下 个 标准 的 一 部 分 或 被 新 的 标准 借鉴 。 例 如 CoffeeScript 虽 然 最 终 
没有 形成 JavaScript 开 发 标准 ， 但 ECMAScript 6 却 借鉴 了 其 中 很 多 优秀 的 
特性 。 目 前 生成 Virtual DOM 的 衍生 脚本 语法 ， 未 来 也 是 有 可 能 被 列 入 





到 JavaScript 标 准 当中 的 。 


经 过 大 版 本 的 更 新 稳定 ， 目 前 前 端 三 层 结构 实现 已 经 处 于 
HTML5、CSS3、ECMAScript 6+ 标 准 规范 结合 的 阶段 ， 后 面 标准 的 新 变 
化 也 会 越 来 越 小 。 至 少 迄 今 为 止 ， 我 们 无 法 预见 HTML6 的 到 来 ，CSS4 
的 特性 也 令 人 担忧 ，ECMAScript 7 的 特性 更 新 也 并 不 明显 ， 这 都 显示 出 
目前 前 端 项 目 实践 规范 将 会 相对 稳定 一 段 较 长 的 时 间 ， 后 面 的 修改 不 会 
像 之 前 一 样 上 共有 题 颖 性， 这 也 是 技术 标准 发 展 到 一 定 成 熟 阶段 必然 发 生 
的 事情 。 


7.1.2 ”应 用 开 及 拉 术 起 于 稳定 并 将 等 
得 下 一 雇 平 新 


前 端 应 用 开发 框架 先后 经 历 了 DOM API、MVC、MVP、MVVM.、 
Virtual ”DOM、MNV 火 阶段， 逐步 解决 了 前 端 开发 效率 、 设 计 模 式 、 
DOM 交 互 性 能 中 存在 的 问题 。 这 些 问 题 处 理 完成 后 ， 相 关 的 框架 也 会 
进入 稳定 发 展 、 版 本 有 序 迭 代 的 时 期 ， 也 就 是 说 前 端的 交互 框架 不 会 像 
以 前 那样 变化 频繁 。 但 目前 前 端 可 能 还 有 一 件 需 要 去 做 的 事情 ， 就 是 使 
用 前 端 技术 栈 独立 开发 Native 应 用 的 能 力 ， 如 果 做 到 这 点 ， 前 端 开 发 者 
就 可 以 结合 MNV 关 开发 模式 独立 进行 Native 应 用 开发 并 快速 实现 高 性 能 
的 移动 端 应 用 了 。 因 为 目前 的 MNV 大 框架 的 设计 实现 依然 依赖 少数 几 
个 已 有 的 成 熟 Native 应 用 的 运行 环境 ， 还 做 不 到 在 通用 的 APP 上 用 前 端 
技术 栈 直接 调用 移动 设备 原生 API。 但 如 果 前 端 技术 栈 具 备 了 通用 的 
Native 开 发 能 力 ， 技 术 上 也 就 意味 着 JavaScript 脚 本 〈 或 是 衍生 的 其 他 脚 
本 ) 可 以 将 任何 一 个 普通 的 移动 端 应 用 编译 打包 成 为 Native 包 ， 并 能 使 
用 MNV* 模 式 直接 与 移动 设备 原生 API 进 行 交 互 。 目 前 也 有 框架 在 做 这 








方面 的 尝试 ， 但 还 不 理想 ， 仍 需要 更 多 的 改进 完善 。 但 无 论 如 何 ， 前 端 
技术 栈 的 Native 开 发 实现 技术 必 将 成 为 前 并 技术 的 下 一 个 实践 核心 。 


7.1.3 ”持续 不 断 的 技术 工具 探索 


前 端 技术 效率 和 性 能 的 提升 当然 不 是 仪 徘 前 端 框架 就 能 解决 的 ， 还 
需要 其 他 各 方面 辅助 工具 的 支持 ， 例 如 局 效 的 调试 工具 、 构 建 自动 化 工 
共 、 目 动用 布 部 着 工具 等 。 所 以 未 来 前 端 发 展 过 程 中 各 种 高 效 工具 仍 会 
不 断 出 现 ， 解 决 特定 场景 下 的 问题 ， 最 后 完成 一 个 优胜 劣 汰 的 过 程 。 


7.1.4 浏览 器 平台 新 特性 的 应 用 


就 浏览 器 端 应 用 而 言 ， 以 Chrome 为 代表 的 浏览 器 版 本 和 特性 发 展 
帮 代 极其 迅速 ， 经 过 多 版 本 的 欠 代 ， 浏 览 右 上 已 经 可 以 实现 较 多 的 增强 
和 实用 特性 ， 例 如 Web Component、Service Worker、IndexDB、 
WebAssembly、WebRTC、ECMAScript 6 十 的 支持 等 ， 但 由 于 浏览 器 的 
种 类 和 版 本 多 样 ， 我 们 还 不 能 在 业务 中 直接 推广 使 用 这 些 新 的 特性 ， 但 
这 些 特性 仍然 给 了 我 们 很 多 实现 未 来 技术 的 可 能 ， 并 且 未 来 较 多 技术 会 
在 这 些 新 特性 的 基础 上 进行 优化 或 改进 产生 。 


7.1.5 ”更 优 化 的 前 病 技 术 开 及 生 态 


贯 罕 浏 览 句 、 服 务 端 和 移动 器 ， 前 端正 朝 着 多 闪 、 多 技术 实现 的 方 
加 发 展 。 这 意味 着 前 器 这 和 套 技术 栈 能 做 的 事情 可 能 更 多 ， 涉 及 的 平台 更 
广 。 但 作为 整套 扩 术 开发 生态 的 一 部 分 ， 每 一 项 技术 的 出 现 都 必须 要 考 
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碟 开 发 效率 、 维 护 成 本 、 性 能 、 扩 展 性 这 几 个 方面 的 问题 ， 所 以 寻找 并 
发 展 更 优 的 开发 生态 体系 仍 是 未 来 前 端 技术 的 大 方向 ， 对 于 新 技术 的 出 
现 ， 我 们 也 会 从 以 下 几 个 方面 去 评价 它 的 意义 。 


1. 开 肥 效率。 通常 提高 开发 效率 的 方式 就 是 使 用 开发 框 桨 。 例 如 
DOM 编 程 框 染 简化 了 脚本 API 的 使 用 、 提 高 了 代码 复 用 性 ， 选 择 好 的 框 
架 常 第 能 让 我 们 事半功倍 。 


2. 维护 成 本 。 使 用 框架 提高 了 项 目的 开发 效率 ， 但 却 并 不 能 解决 
代码 维护 的 问题 。 这 就 需要 借助 合适 的 模式 来 管理 项 目 开 发 的 代码 ， 降 
低 项 目的 维护 成 本 ， 例 如 提取 公共 业务 基础 库 、 模 块 化 、 组 件 化 等 。 目 
前 最 佳 的 实践 可 能 就 是 组 件 化 了 ， 让 业务 模块 的 实现 和 管理 有 章 可 循 ， 
同时 这 也 是 web 标 准 未 来 发 展 的 需要 。 





3. 性 能 。 从 前 问 开 发 框架 的 演进 来 说 ， 可 以 总 结 为 先 专注 村 解雇 
前 端的 开发 效率 问题 ， 然 后 解决 前 端的 交互 性 能 问题 ， 再 去 尝试 打通 
Native 开 发 的 能 力 。 所 以 性 能 将 作为 未 来 评价 任何 一 个 框架 或 拉 术 优 务 
性 的 重要 标准 ， 同 时 也 将 是 一 个 无 法 避 开 的 永久 性 话题 。 





4. 扩展 性 。 其 实 扩 展 性 并 不 只 是 框架 的 方便 定制 和 扩展 特性 ， 还 
要 考虑 是 否 能 与 原来 的 技术 框架 相 兼 容 并 解 厢 合 。 例 如 要 使 用 条 个 新 技 
术 对 原 有 的 业务 做 改造 ， 我 们 不 可 能 马上 就 葵 换 反 所 有 的 业务 模块 ， 不 
能 因为 新 增加 的 技术 框架 实现 而 导致 旧 的 模块 运行 出 现 问 题 。 所 以 在 新 
技术 的 应 用 中 ， 除 了 保证 原 有 业务 层 的 扩展 兼容 ， 实 现 功 能 的 平滑 过 渡 
也 是 一 个 必须 考虑 的 问题 。 


7.1.6 ”前 闹 狐 人 岛 域 的 出 现 





除了 目前 浏览 器 、 服 务 器 、 移 动 端 上 的 应 用 开发 技术 变革 和 探索 
外 ， 未 来 前 端 也 会 出 现 新 的 应 用 场景 ， 例 如 VYR、 物 联网 Web 化 、Web 人 
工 智能 等 。 这 些 虽 然 听 着 比较 远 ， 但 一 旦 到 来 就 会 很 快 被 使 用 ， 所 以 前 
端 不 仅 上 自身 发 展 快 ， 推 广 使 用 也 极其 迅速 ， 例 如 移动 互联 网 Web 的 普及 
也 就 两 三 年 时 间 。 


近 几 年 ，Web VR 和 物 联 网 Web 化 的 概念 渐渐 出 现 ， 国 外 甚至 出 现 
了 以 人 工 智能 为 支撑 的 Web 应 用 。 


首先 ， 物 联网 Web 化 古 随 看 传统 软件 管理 的 Web 化 管理 而 出 现 的 ， 
目的 是 为 了 通过 Web 手 段 管理 传统 可 控 的 智能 设备 ， 当 然 这 里 不 想 去 吹 
捧 物 联网 的 终极 目标 到 抵 有 多 美好 ， 只 是 提出 了 物 联 网 Web 化 的 可 能 
性 。 可 以 肯定 的 一 点 是 ， 人 类 目前 所 有 工具 类 物体 的 Web 化 控制 都 是 可 
能 的 ， 只 是 现在 去 做 有 一 定 的 代价 和 风险 存在 ， 毕 竟 使 用 传统 的 软件 控 
制 到 目前 为 止 还 没有 遇 到 大 的 瓶颈 。 物 联网 未 来 的 发 展 其 实 就 是 智能 设 
备 ， 通 过 控制 这 些 智能 设备 来 完成 人 类 不 容易 完成 的 事情 ， 如 果 在 智能 
设备 系统 中 融入 人 工 知 能 的 控制 ， 这 样 的 设备 也 就 可 以 理解 成 机 器 人 
了 。 而 物 联 网 Web 化 就 是 通过 Web 的 媒介 来 展示 和 控制 这 些 智能 设备 的 
技术 ， 尽 管 目前 来 看 这 还 比较 遥远 。 




















其 次 ， 在 Web VR 方 面 ， 目 前 Firefox 和 Google Chrome 也 正在 联合 推 
广 这 一 特性 使 浏览 器 支持 ， 相 信和 在 浏览 器 端 体验 VR 的 时 代 也 离 我 们 不 
远 了 。 不 过 就 目前 而 言 ， 软 件 服务 的 虚拟 现实 技术 的 提升 空间 仍然 很 
大 ， 而 且 VR 涉 及 的 内 容 很 广泛 ， 现 在 涉及 最 多 的 也 只 是 VR 视 频 类 ， 还 
有 体感 类 、 环 境 类 的 应 用 场景 尚 竺 开发。 不 过 Web VR 的 提出 无 疑 也 为 
前 端 技 术 发 展 提供 了 一 个 可 能 的 方向 ， 例 如 目前 VR 直 播 也 成 为 了 一 个 
行业 内 的 热点 技术 ， 而 且 极 有 可 能 成 为 一 种 新 的 媒体 内 容 表现 形式 出 现 
在 用 户 浏览 器 上 。 就 目前 Web 闹 内 容 展示 来 襄 ， 其 形式 主要 包括 页 面 3D 





展示 和 VR 展示 两 方面 ，3D 展 示 是 指 通 过 3D 的 画面 来 展示 要 显示 的 内 
容 ， 目 前 浏览 器 上 主要 以 three.js 的 实现 为 代表 ， 而 VR 展示 内 容 则 通常 
是 需要 通过 VR 头 盔 配 合 0 所 以 现 有 一 些 例如 
aframe 等 Web VR 的 框架 主要 是 在 three.js 的 基础 上 构建 的 。 





<script src="js/three.min.js"></script> 
<script> 
let scene, camera, renderer,; 


let geometry, material, mesh,; 


init()， 


animate( ) 


function init() { 

Scene = new THREE. Scene(); 

camera = new THREE.PerspectiveCamera( 75, window.innerwidth / 
10000 ); 


camera.position.z = 1000; 


geometry = new THREE.BoxGeometry( 200, 200, 200 ); 


material = new THREE.MeshBasicMaterial( { color: Oxff0000, wi 


mesh = new THREE.Mesh( geometry, material ); 


scene.add( mesh ); 


renderer = new THREE .WebGLRenderer(); 


renderer.setSize( window.innerwidth, window.innerHeight ); 


document ,body ,appendCchild( renderer.domElement ); 


function animate() { 
requestAnimationFrame( animate ); 
mesh.rotation.x += ©0.01; 


mesh.rotation.y += 0.02; 


renderer.render( scene, camera ); 


} 


</script> 


这 段 代 码 是 three.js 提 供 的 一 个 官方 例子 ， 它 可 以 创建 一 个 场景 、 一 
个 摄像 机 和 一 个 立方 体 ， 并 将 立方 体 添 加 到 场景 中 ， 然 后 通过 WebGL 
来 完成 泻 染 并 展示 立方 体 的 动画 。 对 这 方面 有 兴趣 的 读者 可 以 继续 进行 
更 深入 的 研究 。 


男 外 ， 你 应 该 听 说 过 人 工 乔 能 ， 不 过 你 可 能 不 知道 Web 和 和 人工 智能 
征 怎么 结合 的 。 早 在 2011 年 就 有 人 提出 了 Web 与 人 工 智能 商业 化 结合 的 
可 能 性 ， 结 合 Web 端 的 人 机 交互 与 后 台 的 机 喜 学 习 ， 相 信 这 个 方 癌 未 来 
又 将 催生 出 一 批 新 的 互联 网 企业 。 尽 管 目 前 国内 还 缺乏 较 多 的 应 用 场 
景 ， 但 在 国外 已 经 存在 基于 人 工 智 能 文 撑 的 Web 应 用 来 为 人 们 提供 服务 
Ts 











可 以 认为 我 们 又 开始 进入 了 一 个 前 端 技术 的 过 渡 时 代 ， 现 有 前 端 开 
发 技术 趋 渐 成 熟 ， 新 的 前 端 技术 领域 跃跃欲试 ， 可 以 肯定 的 是 物 联网 


Web、Web VR、 人 工 知 能 必定 会 成 为 前 端的 下 一 批 半 命 性 技术 。 我 们 
需要 做 的 ， 仍 是 把 握 技术 发 展 趋势 ， 紧 跟 领 域 前 进 的 步伐 ， 在 漫漫 前 端 
道路 上 继续 前 进 。 


参考 资料 : https:Waframe.io/; http://threejs.org/。 


7.2 ”做 一 名 优秀 的 前 病 工 程 师 


本 书 在 前 面 的 章节 中 辐 读 者 讲解 了 近 几 年 来 前 端 业界 内 主流 的 开发 
技术 ， 但 并 不 等 于 说 读 完 这 本 书 惑 意味 着 你 已 经 掌握 了 前 端 领域 的 所 有 
知识 。 首 先 ， 本 书 以 原理 解析 和 体系 知识 分 析 为 主 ， 回 读者 们 讲解 了 前 
端的 工程 和 技术 设计 思维 思路 ， 起 到 宏观 的 知识 体系 指导 作用 ， 而 并 不 
征 深 入 某 一 方面 进行 剖析 ， 主 要 目的 是 让 该 者 了 解 前 端 技术 体系 的 来 龙 
去 脉 ， 知 道 前 端 每 一 次 技术 发 展 的 原因 ， 避 和 免 自 己 只 在 业务 代码 和 框 染 
中 折腾 。 其 次 ， 前 并 技术 的 革新 不 会 就 此 集 止 ， 以 后 依然 会 有 更 多 的 应 
用 技术 出 现 ， 我 们 仍然 需要 在 掌握 现 有 知识 的 基础 上 继续 学 习 探 索 。 无 
论 如 何 ， 要 成 为 一 名 优秀 的 前 端 工程 师 ， 我 们 仍 需 要 做 更 多 的 事情 。 























7.2.1 学 会 珊 效 沟通 





学 会 高 效 沟通 是 前 提 ， 在 前 面 的 革 市 中 也 讲 到 过 ， 学 会 使 用 局 效 的 
沟通 方式 很 重要 。 简 单 来 说 ， 沟 通 就 是 通过 有 效 的 方法 手段 正确 地 表达 
目 己 或 理解 别人 观点 的 一 个 过 程 。 作 为 工程 师 我 们 不 仅 需 要 具备 全 面 严 
谨 的 思维 逻辑 ， 民 好 的 沟通 能 力也 是 帮助 我 们 高 效 完 成 工作 的 一 项 必 不 
可 少 的 技能 。 


7.2.2 ”使 用 高 效 的 开发 工具 


工 欲 善 其 事 必 先 利 其 器 ， 使 用 高 效 的 工具 能 节省 大 量 的 开发 时 间 。 








比如 高 效 地 使 用 SVMN/Git、 编 辑 器 辅助 插件 、 调 斌 工具、 构建 工具 、 测 
试 部 署 工 具 等 。 这 些 都 是 实际 工作 中 一 定 会 接触 到 的 ， 我 们 必须 要 找到 
一 个 清晰 的 思路 和 便捷 的 途径 去 运用 这 些 工 具 ， 例 如 快捷 键 的 使 用 、 构 
建 的 自动 化 程度 等 都 与 我 们 的 工作 效率 相关 。 所 以 ， 笔 者 建议 尽 可 能 :; 
择 自 动 化 程度 更 高 的 工具 来 提高 效率 ， 减 少 重复 性 工作 。 





7.2.3 ”处 理 问 题 方法 论 


作为 开发 者 ， 很 多 时 候 我 们 除了 开 友 新 需求 ， 设 计 新 的 项 目 结构 ， 
还 要 处 理 很 多 临时 的 问题 。 忌 结 下 来 ， 这 些 问 题 可 以 归 为 几 类 : 业务 代 
码 类 问题 、 需 求 变 更 或 需求 风险 类 问题 、 开 会 等 其 他 类 问题 。 如 采 你 在 
一 个 项 目 组 里 进行 团队 协作 ， 那 么 这 些 事 情 一 定 会 发 生 而 且 很 难 权衡 ， 
很 占用 时 间 ， 一 旦 处 理 不 好 ， 束 很 可 能 陷入 困境 。 这 里 ， 笔 者 也 分 享 一 
下 目 己 处 理 这 些 问题 的 心得 。 








1. 代码 类 问题 


我 想 大 家 一 定 也 都 迪 到 过 因为 条 次 业务 代码 问题 或 者 业务 基础 公共 
模块 问题 ， 最 终 导致 业务 数据 或 流程 不 正确 ， 需 要 紧急 处 理 。 这 里 一 般 
可 能 是 通过 产品 经 理 或 测试 人 员 反馈 给 你 的 ， 遇 到 这 种 问题 时 既 不 能 急 
踩 ， 也 不 能 盲目 地 去 修改 。 第 一 步 要 先 确 认 问 题 ， 就 是 弄 清楚 是 不 是 真 
正 的 问题 。 绝 大 部 分 情况 下 是 有 问题 的 ， 但 有 时 征 因为 产品 经 理 需 求 的 
打上 略 、 设 置 了 网 络 代理 或 测试 方法 环境 等 导致 的 ， 所 以 这 里 要 稍微 注意 
一 点 。 要 确定 问题 也 很 简单 ， 看 能 否 复 现 束 知道 了 。 如 果 确 实 有 问题 ， 
那么 第 二 步 要 确定 是 什么 问题 ， 可 能 是 代码 类 问题 ， 也 可 能 是 产品 或 设 
计 考 碟 不 全 面 的 问题 。 作 为 开 及 者 ， 我 们 通 闻 只 能 处 理 可 控 的 代码 类 问 
题 ， 如 果 问 题 不 在 目 己 的 可 控 范 围 内 就 要 尽快 沟通 反馈 ， 让 相关 人 员 做 

















出 修改 ， 如 果 确 认 是 因为 自己 开发 引起 的 ， 第 三 步 就 要 想 想 解决 的 方法 
了 。 如 宁 问 题 修 改 很 快 就 能 解决 ， 建 议 马 上 进行 处 理 ， 如 有 果 需 要 较 大 的 
修改 工作 量 ， 就 要 考 夸 下 解决 方案 性 价 比 的 问题 了 ;， 如 果 处 理 比较 麻 

烦 ， 建 议 通 过 新 版 本 或 将 问题 独立 出 来 处 理 ， 当 然 这 类 情况 通常 会 比较 


少 。 





2. 需求 类 问题 


(1) 作为 开发 者 ， 我 们 遇 到 最 种 见 的 需求 类 问题 可 能 就 是 变更 

了 ， 原 因 是 大 多 产品 同学 一 般 不 了 解 技 术 ， 对 需求 的 设计 实现 理解 有 偶 
差 、 需 要 调整 修改 。 遇 到 这 类 问题 也 不 能 急躁 ， 依 然 是 分 步 来 应 对 ， 首 
先 不 要 直接 爽快 地 接受 需求 变更 ， 而 是 评估 需求 的 等 级 : 如 果 是 一 些小 
的 问题 不 会 花 太 多 时 间 ， 那 么 建议 先 接受 确认 修改 ; 当然 也 不 排除 会 带 
来 较 多 额外 工作 量 的 情况 ， 这 种 情况 就 最 好 剖 新 进行 需求 排 期 ， 毕 部 是 
产品 同学 设计 时 欠 考 虑 所 导致 的 问题 ， 这 是 开发 者 不 可 控 的 ， 还 有 一 种 
情况 你 可 能 也 会 遇 到 ， 变 更 的 需求 涉及 比较 细节 的 非 核心 内 容 ， 但 要 实 
现 的 代价 较 大 ， 这 种 情况 更 多 的 处 理 方式 是 不 接受 ， 或 降低 优先 级 在 核 
心 功能 完成 后 再 进行 处 理 。 

















(2) 除了 需求 变更 ， 可 能 遇 到 的 第 二 类 问题 就 是 应 对 多 个 需求 并 
行 的 情况 ， 甚 至 可 能 同时 应 对 多 个 不 同 的 产品 经 理 的 需求 ， 而 且 每 个 需 
求 都 是 不 能 马上 解 决 的 。 那 么 这 时 吏 需 要 开发 者 做 决策 了 ， 需 求 之 间 是 
有 优先 级 关系 的 : 如 果 一 个 需求 不 马上 完成 会 明显 导致 线 上 大 的 业务 流 
程 缺 陷 ， 那 就 建议 匈 先 从 这 个 下 手 ; 如 果 几 个 需求 都 显得 很 紧迫 ， 这 区 
只 能 和 产品 经 理 一 起 讨论 开发 计划 。 一 心 不 能 两 用 ， 工 作 时 间 也 不 能 
double， 在 给 不 出 好 建议 的 前 提 下 ， 那 就 让 产品 经 理 自己 决 全 好 优先 
级 。 








(3) 无 法 避免 需求 风险 管理 问题 。 简 单 理解 就 是 ， 需 求 不 能 按期 
交付 ， 你 虽然 已 经 做 好 了 排 期 管理 和 需求 评估 ， 但 是 由 于 各 种 原因 ( 需 
求 变更 或 技术 方案 变更 ) 已 经 确定 不 能 按期 完成 。 那 么 这 种 情况 下 ， 你 
需要 尽早 让 其 他 人 知道 实际 进度 。 需 求 不 能 按时 交付 ， 要 将 风险 尽早 地 
暴露 出 来 ， 千 万 不 要 等 到 最 后 告诉 大 家 。 不 只 是 前 端 ， 各 端的 开 及 、 设 
计 人 员 甚 至 产品 经 理 如 果 在 团队 协作 时 不 能 按时 完成 协作 任务 都 应 该 尽 
早 通 知 其 他 人 做 好 风险 管理 工作 。 














3. 其 他 类 问题 





很 多 时 候 ， 原 先 定好 的 开发 周期 会 因为 各 种 开会 让 开发 时 间 显得 不 
足 ， 评 审 会 、 总 结 会 、 分 享 会 都 会 占用 时 间 。 要 相信 ， 这 是 工作 常态 。 
这 种 情况 需要 灵活 处 理 ， 需 求 开发 排 期 评估 时 预 留 些 缓冲 时 间 就 可 以 解 
决 了 . 


7.2.4 学 会 前 站 项 目 开 及 流 程 设 计 


除了 完成 业务 开发 需求 ， 对 于 前 端 开 发 人 员 来 说 ， 男 一 个 很 重要 的 
方面 应 该 就 是 学 会 前 病 项 目 开 发 流程 设计 的 能 力 。 这 里 说 的 前 端 项 目 开 
发 流程 设计 指 的 是 能 人 否 快 速 地 进行 前 端 项 目 基 础 工程 、 第 用 业务 模块 以 
及 开发 流程 的 搭建 能 力 。 有 具体 来 说 吏 是 能 人 否 快速 地 设计 建立 一 个 项 目 开 
发 的 Codebase， 这 里 面包 括 前 端 框架 选 型 、 模 块 化 方案 、 代 码 规范 化 、 
构建 自动化、 组 件 化 目录 设计 、 代 码 优化 处 理 、 数 据 统 计 、 同 构 项 目 结 
构 设计 等 ， 基 于 这 个 组 建 好 的 Codebase， 个 人 或 团队 其 他 人 就 能 在 这 个 
基础 上 直接 人 便捷、 高 效 地 开发 业务 模块 了 。 











其 实 我 们 也 多 多 少 少 用 过 一 些 项 目 开 发 流程 工具 ， 例 如 基础 的 构建 


项 目 就 是 一 个 简单 的 开发 流程 ， 但 区 靠 它 是 远 远 不 够 的 ， 需 要 更 完善 的 
补充 。 学 会 使 用 开发 流程 工具 很 简单 ， 但 要 根据 不 同 的 使 用 场景 设计 组 
建 符合 预期 的 开发 流程 工具 ， 束 要 清楚 开发 流程 中 每 个 细节 的 实现 。 束 
组 件 化 设计 来 说 ， 如 何 选 择 适 合 自 己 项 目的 组 件 化 管理 方案 就 比较 重要 
了 。 是 按照 文件 管理 还 是 按照 目录 管理 呢 ? 如 果 按 目 录 ， 那 么 目录 怎么 
设计 ? 公用 组 件 目 录 和 非 公用 组 件 目录 义 该 上 怎么 区 分 ? 要 考虑 到 的 问题 
可 能 会 比较 多 ， 但 无 论 如 何 需要 注意 的 一 点 是 ， 在 进行 开发 项 目 流程 设 
计时 ， 也 不 一 定 需 要 使 用 那些 最 新 的 技术 和 设计 思路 ， 更 建议 根据 自己 
或 团队 的 具体 情况 来 决定 。 一 方面 ， 如 果 不 这 样 做 有 可 能 会 增加 其 他 人 
对 项 目的 上 手 难度 ， 或 者 后 期 维护 的 成 本 ， 妃 一 方面 ， 可 以 避免 过 度 设 
计 ， 如 果 你 的 网 站 访问 量 本 来 殉 比 较 小 ， 就 没 必 要 用 很 复杂 的 前 、 后 合 
染 构 了 。 


7.2.5 ”持续 的 知识 和 经 验 积 黑 管 理 


前 端 技术 发 展 很 快 ， 在 你 还 没有 深入 理解 本 书 涉及 的 所 有 内 容 之 
前 ， 还 是 需要 学 习 的 ， 否 则 你 的 前 端 知识 体系 应 该 是 不 完整 的 。 即 使 你 
己 经 完全 理解 了 这 些 内 容 ， 你 依然 有 许多 事情 要 做 ， 例 如 你 可 能 已 经 成 
为 了 项 目 负责 人 或 前 端 管 理 者 的 角色 ， 需 要 学 习 更 多 其 他 方面 的 知识 ， 
如 何 快速 塔 养 员工 、 促 进 团 队 成 员 高 效 协作 等 。 总 之 ， 持 续 性 的 学 习 很 
重要 ， 这 不 仅仅 是 针对 前 端 开 用 人 员 。 























作为 前 端 开 发 者 ， 学 习 的 方式 也 有 很 多 ， 例 如 看 别人 的 技术 博客 、 
研究 最 新 的 技术 方向 、 阅 读 开源 代码 、 听 技术 分 享 会 、 看 些 书 等 。 当 然 
目 己 分 享 知 识 的 方式 也 类 似 ， 写 技术 博客 、 上 传 目 己 的 研究 成 采 、 提 区 
自己 的 开源 代码 、 去 分 享 交 流 会 演讲 、 自 己 写 一 本 书 ， 如 果 还 不 满足 ， 








那 就 号 两 本 。 针 对 技术 博客 的 学 习 方 式 来 说 ， 推 荐 读者 们 关注 一 些 更 新 
较 多 的 技术 论坛 或 一 些 优秀 前 端 团 队 的 技术 博客 ， 第 去 看 看 总 会 有 些 收 
获 。 前 端 技术 相关 博客 论坛 也 比较 多 ， 例 如 dcon、infoq、 极 限 前 端 、 
imweb.io、 前 问 早 读 课 、fex 技 术 周刊 、w3ctech 等 ， 除 此 之 外 你 也 可 以 
加 入 他 们 的 技术 交流 社 群 分 享 沟通 。 








关于 前 端 学 习 ， 说 起 来 简单 ， 但 实际 上 内 容 还 是 很 多 的 。 很 多 时 
候 ， 我 们 都 不 知道 要 学 什么 ， 前 端的 知识 很 零散 ， 涉 及 的 方面 很 广 ， 看 
了 别人 的 很 多 博客 ， 但 都 感觉 只 是 了 解 点 点 面 面 ， 没 能 完全 体系 化 地 学 
会 。 本 书 就 是 要 帮 大 家 解决 这 个 问题 ， 书 中 的 前 几 章 涉及 的 内 容 通过 几 
条 主线 涵盖 了 目前 前 并 方面 几乎 所 有 的 技术 知识 和 设计 原理 ， 按 照 这 些 
方 回去 研究 挖掘 束 可 以 基本 了 解 前 并 需要 掌握 的 所 有 知识 了 。 


7.2.6 ” 切 尽 过 分 退 求 技术 


持续 性 的 学 习 积 累 和 分 享有 助 于 我 们 快速 地 提升 目 己 的 知识 面 和 拉 
术 能 力 ， 但 是 也 要 注意 一 点 ， 一 切 技术 的 最 终 目 的 都 是 为 产品 实现 服务 
的 。 技 术 研 究 应 该 是 在 完成 并 希望 将 产品 打造 更 好 的 目的 上 进行 的 ， 切 
忌 过 分 追求 技术 ， 让 上 自己 沉迷 在 探索 技术 的 道路 上 。 我 们 学 习 技 术 的 根 
本 目的 还 是 要 为 产品 输出 服务 ， 虽 然 需要 一 段 较 长 的 时 间 来 积累 技术 和 
提升 能 力 ， 但 是 对 技术 过 分 地 苛求 反而 会 在 产品 业务 的 实现 支持 上 一 团 
糟 。 如 果 你 已 经 进入 了 管理 者 的 角色 ， 就 该 快速 转型 为 管理 角色 ， 更 多 
从 管理 者 的 角度 上 为 整个 团队 服务 ， 不 该 再 按照 工程 师 的 思维 延续 下 
去 ， 对 技术 细节 过 分 奶 求 。 


7.2.7 必要 的 产品 设计 思维 


























作为 前 端 工程 师 ， 我 们 常常 在 做 的 事情 是 将 产品 需求 和 设计 的 功能 
实现 ， 然 后 添加 上 必要 的 辅助 数据 上 报 ， 那 么 页 面 就 基本 可 以 上 线 了 。 
但 是 ， 有 经 验 的 工程 师 开 发 需求 时 除了 实现 需求 ， 做 的 为 一 件 事情 是 思 
考 这 个 需求 为 什么 是 这 样 的 呢 ? 是 不 是 合理 呢 ? 如 果 不 合理 该 怎么 修改 
呢 ? 很 多 时 候 产品 人 员 不 懂 开发 知识 ， 设 计 细 节 时 都 是 站 在 用 户 的 角度 
上 思考 ， 功 能 设计 都 比较 主观 ， 从 而 可 能 会 出 现 很 多 问题 。 








举 个 例子 ， 茶 个 产品 交互 入 希望 在 移动 并 页 面 最 的 部 放置 一 个 固定 
提交 按钮 ， 这 样 用 户 在 手机 屏幕 最 下 面皮 击 提交 就 可 以 了 ， 方 便 用 户 单 
手 操作 。 这 个 设计 本 身 是 很 好 的 ， 但 表单 项 个 数 是 不 确定 的 ， 设 计 最 后 
就 照 做 了 一 个 宽度 80pxx 高 度 30px 的 提交 按钮 ， 设 计 稿 很 完美 ， 表 单 和 
按钮 设计 都 很 诗 涡 。 但 如 果 按 照 设 计 稿 完成 ， 就 会 发 现 问 题 : 从 用 户 的 
角度 上 来 看 ， 按 钮 太 小 ， 点 击 不 方便 ; 从 开发 角度 上 来 看 ， 表 单项 较 多 
时 表单 后 面 的 填写 项 会 被 底部 固定 的 提交 按钮 挡住 ， 这 时 需要 将 提交 按 
钮 区 域 和 表单 区 域 用 颜色 区 分 开 来 才 合理 。 所 以 ， 如 果 前 端 工 程 师 经 党 
做 前 端 页 面 的 交互 实现 的 话 ， 是 会 有 一 定 产品 设计 思路 的 ， 知 道 一 些 各 
见 需求 实现 的 漏洞 和 问题 ， 再 结合 自己 的 专业 开发 知识 ， 这 两 个 问题 便 
可 以 在 需求 阶段 就 过 涯 卸 了 。 























什么 是 产品 思维 ? 通俗 地 讲 就 是 用 户 体验 思维 ， 或 者 说 是 将 目 己 当 
成 普通 用 户 来 对 产品 进行 思考 。 因 为 一 切 互联 网 产品 的 设计 最 终 都 是 给 
用 户 使 用 的 ， 所 以 产品 经 理 设计 功能 时 也 应 该 尽 可 能 站 在 用 户 的 角度 上 
去 思考 设计 ， 开 发 者 也 可 以 从 一 个 用 户 的 角度 上 去 思考 产品 。 


除 此 之 外 ， 作 为 前 端 工程 师 ， 强 烈 建议 大 家 去 看 一 两 本 关于 产品 经 
理 方面 的 书籍 。 一 是 作为 整个 产品 项 目 流程 的 下 游 实现 者 ， 有 必要 去 了 
解 一 个 互联 网 产品 的 生命 周期 是 怎样 的 ， 二 是 学 习 一 些 和 常用 的 产品 设计 
常识 ， 在 一 定 程度 上 学 会 分 析 需 求 的 漏洞 和 完整 性 。 当 然 这 是 比较 理想 











的 情况 ， 有 兴趣 的 读者 可 以 去 看 看 。 


7.3 本 章 外 区 


这 一 草 主 要 分 析 了 未 来 前 端 技术 发 展 的 趋势 ， 告 诉 大 家 如 何 成 为 一 
名 优秀 的 前 问 工 程 师 。 关 于 如 何 成 为 一 名 优秀 的 前 端 工 程 师 ， 个 人 和 觉得 
以 上 这 些 方面 都 是 应 该 考虑 去 做 的 。 但 这 仅 代 表 个 人 观点 ， 如 果 你 有 更 
好 的 建议 或 想法 ， 也 欢迎 向 笔者 推荐 。 











未 来 前 端 技术 仍 会 不 断 变化 ， 新 的 领域 也 会 出 现 ， 而 我 们 要 做 的 惑 
是 不 忘 初 心 ， 坚 持 前 端 学 习 的 方法 论 ， 不 断 扩 充 和 升级 自己 的 知识 储 
备 ， 做 一 名 优秀 的 前 并 工程 师 。 如 果 你 对 本 书 的 内 容 感 兴趣 或 觉得 还 有 
哪些 知识 内 容 没 有 了 解 ， 也 可 以 同 笔 者 提出 。 和 希望 你 喜欢 本 书 ， 并 且 期 
待 第 二 版 。 在 第 二 版 中 ， 笔 者 将 会 邀请 更 多 行内 有 经 验 的 开发 者 一 起 完 
善 改进 ， 让 内 容 更 加 丰富 。 最 后 ， 非 党 感谢 读 完 这 本 书 ， 吏 心 希望 读者 
都 能 从 中 有 所 收益 。 








